webpack4.x中使用postcss-loader、autoprefixer給CSS屬性自動添加前綴

因爲市面上存在幾大主流瀏覽器，當咱們在編寫CSS相關屬性的時候，須要添加兼容各瀏覽器的前綴，可是這樣很是耗時、影響工做效率。

好比編寫：

1 .searchBox{
2     display: flex;
3 }

但咱們想要的是這種：

1 .searchBox{
2     display: -webkit-box;
3     display: -webkit-flex;
4     display: -moz-box;
5     display: -ms-flexbox;
6     display: flex;
7 }

那麼，接下來有辦法解決該問題。

安裝

1 npm install node-sass sass-loader css-loader style-loader postcss-loader autoprefixer -D

配置 webpack.config.js

 1 module.exports = [
 2     module: {
 3         rules: [
 4              {    
 5                   test: /\.(scss|css)$/,    //打包css、sass文件
 6                   use:[{
 7                             loader:'css-loader',
 8                             options: { minimize: false }
 9                        },
10                        {
11                             loader:'sass-loader'
12                        },
13                        'postcss-loader'
14                    ]        
15               }
16          ]
17     }
18 ]    

建立 postcss.config.js文件

該文件與webpack.config.js在同一目錄下，配置以下：

1 module.exports = {
2      plugins : [
3          require('autoprefixer')({
4              browsers : ['last 100 versions']      //必須設置支持的瀏覽器纔會自動添加添加瀏覽器兼容
5          })
6      ]
7  };

 

好了，基本配置就是這些，以後打包css的時候會自動添加前綴。

 

若是文章中存在錯誤的地方，麻煩請你們在評論中指正，以避免誤人子弟，謝謝！