老师，我这里发现一个很奇怪的问题。
我按照您的方法添加了postcss-loader、安装了autoprefixer插件，然后将代码写成使用index.scss 引用 avatar.scss 的形式。但是很奇怪无法添加前缀
avatar.scss

body{
    .avatar {
        width: 150px;
        height: 150px;
        transform: translate(100px, 100px);
    }
}

index.scss 引用 avatar.scss

@import "avatar.scss";

index.js 引用index.scss

import "../css/index.scss"

const img = new Image();
img.src = timg;
img.classList.add("avatar")

webpack配置项在打包scss文件时安装并添加postcss=loader

{
   test: /\.scss$/,
   use: ['style-loader',
         {
            loader: 'css-loader',
            options: {
                importLoaders: 2
            }
         },
         'sass-loader',
         'postcss-loader'],
}

postcss.config.js

module.exports = {
    plugins:[
        require("autoprefixer")
    ]
}

然后在Pakage.json中设置browserlist

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

打包之后浏览器没有厂商前缀，

但是如果不使用index.scss引用avatar.scss，而是直接在index.scss中添加内容，再次打包后就是可以的。

//@import "avatar.scss";
body{
  .avatar {
    width: 150px;
    height: 150px;
    transform: translate(100px, 100px);
  }
}

这是为什么？