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

由於市面上存在幾大主流瀏覽器，當我們在編寫CSS相關屬性的時候，需要添加兼容各瀏覽器的前綴，但是這樣非常耗時、影響工作效率。

比如編寫：

.searchBox{
    display: flex;
}

但我們想要的是這種：

.searchBox{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

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

安裝

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

配置 webpack.config.js

module.exports = [
    module: {
        rules: [
             {    
                  test: /\.(scss|css)$/,    //打包css、sass文件
                  use:[{
                            loader:'css-loader',
                            options: { minimize: false }
                       },
                       {
                            loader:'sass-loader'
                       },
                       'postcss-loader'
                   ]        
              }
         ]
    }
]    

創建 postcss.config.js文件

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

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

 

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

 

如果文章中存在錯誤的地方，麻煩請大家在評論中指正，以免誤人子弟，謝謝！