webpack結合postcss-loader實現css樣式瀏覽器兼容前綴的添加

1、引入添加兼容前綴庫

npm install postcss-loader autoprefixer@9.8.6 -D              //autoprefixer使用9.8.6版本，筆者親測，兼容PostCSS依賴的版本。

2、在項目根目錄下創建postcss.config.js,配置如下:

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

3、在package.json中要加上bowerlist實現兼容添加

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

4、接下來就可以在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
                ]
            }

注釋：1、多引入了一個sass-loader，便於解析sass，如果不需要可以去掉.

　　　2、importLoaders,指的是在scss文件中引入另一個scss，重新執行sass-loader和postcss-loader。

　　　3、role是從下往上執行，也就是sass-loader -> postcss-loader -> css-loader -> style-loader,所以sass-loader要放在最后，並在postcss-loader的下面，只有解析出來scss，才能添加前綴