webpack结合postcss-loader实现css样式浏览器兼容前缀的添加

一、引入添加兼容前缀库

npm install postcss-loader autoprefixer@9.8.6 -D              //autoprefixer使用9.8.6版本，笔者亲测，兼容PostCSS依赖的版本。

二、在项目根目录下建立postcss.config.js,配置以下:

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

三、在package.json中要加上bowerlist实现兼容添加

  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ],

四、接下来就能够在webpack Module中新增rule

 {
                test: /\.((c|sa|sc)ss)$/i,
                use: [
                    "style-loader",// 将 JS 字符串生成为 style 节点
                    {
                        loader: 'css-loader',
                        options: {
                            // 若是您须要在每一个 CSS 的 `@import` 上运行 `sass-loader` 和 `postcss-loader`，请将其设置为 `2`,若是只须要运行postcss-loader ，只须要将importLoaders设置为1
                            importLoaders: 1,
                        },
                    },
                    "postcss-loader",    //自动为css添加前缀
                    "sass-loader"// 将 Sass 编译成 CSS
                ]
            }

注释：一、多引入了一个sass-loader，便于解析sass，若是不须要能够去掉.

　　　二、importLoaders,指的是在scss文件中引入另外一个scss，从新执行sass-loader和postcss-loader。

　　　三、role是从下往上执行，也就是sass-loader -> postcss-loader -> css-loader -> style-loader,因此sass-loader要放在最后，并在postcss-loader的下面，只有解析出来scss，才能添加前缀