Webpack中Autoprefixer失效求助：Bootstrap构建无CSS前缀

嘿，我帮你排查了下配置里的问题，主要有几个点导致autoprefixer没生效，咱们一步步来修复：

1. 删掉css-loader里多余的autoprefixer配置 #

css-loader的autoprefixer选项早就被废弃了，而且它会和postcss-loader的autoprefixer功能冲突。你需要把css-loader配置中的autoprefixer: true移除，让postcss专门负责前缀处理。

修改后的webpack.config.js中css-loader部分：

{
  loader: 'css-loader',
  options: {
    minimize: false,
    sourceMap: true,
    importLoaders: 1
  }
}

2. 修正postcss配置并指定兼容浏览器范围 #

你的postcss.config.js写法有点问题，而且没有告诉autoprefixer要兼容哪些浏览器，这是关键！它不知道该生成哪些前缀。这里有两种修复方式：

方式一：直接在postcss.config.js中配置浏览器范围 #

module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer')({
      overrideBrowserslist: [
        "last 2 versions",
        "> 1%",
        "IE 11" // 如果需要兼容IE11的话
      ]
    })
  ]
}

方式二：用.browserslistrc文件（更推荐，方便统一管理） #

在项目根目录新建一个.browserslistrc文件，内容如下：

last 2 versions
> 1%
IE 11

然后postcss.config.js可以简化成：

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

3. 确认依赖都装全了 #

确保你已经安装了所有必需的开发依赖，没装的话执行这条命令：

npm install --save-dev extract-text-webpack-plugin css-loader postcss-loader sass-loader node-sass autoprefixer precss

（小提示：如果你的Webpack是4及以上版本，extract-text-webpack-plugin已经被官方推荐的mini-css-extract-plugin替代了，要是后续遇到兼容性问题，可以考虑升级过去）

4. 验证效果 #

改完配置后重新跑构建命令，再打开生成的style.css，就能看到Flex布局相关的浏览器前缀（比如-webkit-box、-ms-flexbox这些）了。

另外给你提个小建议：在custom.scss里导入Bootstrap的时候，记得先写你的自定义变量，再导入Bootstrap源文件，这样自定义变量才能正确覆盖默认值，比如：

// 先写自定义变量
$primary: #your-custom-color;

// 再导入Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

内容的提问来源于stack exchange，提问作者Ganesh Kumar G