webpack3中使用postcss-loader和autoprefixer給css3樣式添加瀏覽器兼容

1.在webpack中需要處理css必須先安裝如下兩個loader

npm install --save-dev css-loader style-loader

2.要處理sass和添加瀏覽器前綴需要下載如下插件和loader

//sass-loader依賴於node-sass，所以還要安裝node-sass
//postcss-loader autoprefixer postcss 處理瀏覽器兼容

npm install --save-dev sass-loader node-sass postcss-loader autoprefixer postcss

3.webpack中配置如下所示

這是官網提供的例子完全可以使用，沒必須要在單獨建立一個配置文件

點擊進入官網地址

{
     test: /\.scss$/,
     use: [ 
           'style-loader',
           {loader: 'css-loader',options: {importLoaders: 2}},  //2代表css-loader后還需要幾個loader
           {loader: 'postcss-loader',options:{plugins:[require("autoprefixer")("last 100 versions")]}},
           'sass-loader'
          ]
 }

4.打包后效果如下

以后再也不用考慮瀏覽器兼容問題了。