webpack配置css瀏覽器前綴

webpack打包時，css自動添加瀏覽器前綴。我們需要用到一個Loader：postcss-loader，和一個插件：autoprefixer

 

安裝

npm i postcss-loader autoprefixer -D

 

方法一

1.在webpack.config.js文件中，找到module下的rules屬性，在里面添加一個對象，完整代碼如下：

module:{
        rules:[
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader','postcss-loader']
            }
        ]
    }

代碼中，還有另外3個loader，因為use調用loader的順序是從右往左的，所以順序不能寫錯了，webpack打包.scss時，首先會調用postcss-loader為其添加瀏覽器前綴，(因為我代碼中用了sass，所以引入了sass-loader)，當瀏覽器前綴添加完后，sass-loader會把sass語法轉換成css語法，在代碼中，一般會有多個css文件，然而css-loader會將css文件整合成一段代碼，這時，style-loader就會將這段代碼，添加到頁面的style標簽中。

 

如果用的普通css，安裝下面兩個就行：

npm i style-loader css-loader -D

 

如果用的sass，需要安裝如下依賴包：

npm i style-loader css-loader sass-loader node-sass -D

 

2.在webpack.config.js文件同級目錄中，新建postcss.config.js文件，並且添加如下代碼：

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

 

配置完，直接打包運行即可。

 

方法二

直接把autoprefixer配置在postcss-loader里面

module:{
        rules:[
            {
                test:/\.scss$/,
                use:[
                    {loader:'style-loader'},//將css-loader整合在一起的代碼，放在頁面中的style標簽里面
                    {loader:'css-loader'},//將各個css文件整合在一起 
                    {loader:'sass-loader'},//將sass語法解析成css
                    {
                        loader:'postcss-loader',
                        options:{
                            plugins:[
                                require('autoprefixer')//postcss-loader會叫autoprefixer插件添加瀏覽器前綴
                            ]
                        }
                    }
                ]
            }
        ]
    }

 

style-loader、 css-loader、 sass-loader的更多的用法，可自行去webpack官網查閱文檔。 灰機直達

這里有個坑，一開始安裝的autoprefixer版本是9.x的，但是配置后沒有效果，之后換成7.x的就可以了。