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.打包後效果以下

之後不再用考慮瀏覽器兼容問題了。