Webpack 4集成Autoprefixer无效果，无法添加前缀求助

核心问题是你的Webpack配置里未引入postcss-loader和autoprefixer依赖，也未配置对应的处理环节，这是导致CSS前缀无法添加的关键。以下是具体修复步骤：

1. 安装必要依赖 #

在项目根目录执行命令：

npm install postcss-loader autoprefixer --save-dev

2. 调整Webpack的SCSS处理规则 #

修改module.rules中的SCSS规则，在css-loader与sass-loader之间加入postcss-loader（loader执行顺序为从右到左，位置不可颠倒）：

module: {
  rules: [
    {
      test: /\.(scss)$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader', // 新增postcss-loader
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
          }
        }
      ]
    }
  ]
}

3. 创建PostCSS配置文件 #

在项目根目录新建postcss.config.js，内容如下：

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

4. 确认browserslist配置有效性 #

你的browserslist配置参数合理，需确保它写在package.json内或单独的.browserslistrc文件中，保证Autoprefixer能正确读取规则。

完成以上操作后，重新执行Webpack构建，Autoprefixer即可正常生成CSS前缀。

内容的提问来源于stack exchange，提问作者Christian