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，才能添加前綴