詳解如何在css3打包后自動(dòng)追加前綴插件：autoprefixer

發(fā)布時(shí)間：2018-12-18 15:36:58 作者：雙眸

這篇文章主要介紹了詳解如何在css3打包后自動(dòng)追加前綴插件：autoprefixer的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

用vue-cli構(gòu)建的項(xiàng)目腳手架已經(jīng)幫你把a(bǔ)utoprefixer的配置做好了，自己不需要做什么改動(dòng)就會(huì)自動(dòng)加前綴：

下面一起看看涉及到autoprefixer這個(gè)插件的一些配置：

1，postcss配置寫(xiě)在.postcssrc.js，

2，瀏覽器規(guī)則則寫(xiě)在package.json上,

3，開(kāi)發(fā)環(huán)境（build/webpack.dev.conf.js）樣式相關(guān)的loader

4，生產(chǎn)環(huán)境（build/webpack.prod.conf.js）樣式相關(guān)的loader

上述的配置設(shè)置不需要自己配置，cli腳手架環(huán)境搭建的時(shí)候已經(jīng)配置好了。

vue-cli的開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境都是使用了postcss的，并且配置是一樣的

這里有一個(gè)問(wèn)題，網(wǎng)上有博主說(shuō)項(xiàng)目打包前和打包后的css前綴不一致：

--給app.vue下的img添加樣式

img{
 display: flex;
 transform: translateX(200px)
}

--打包前（即開(kāi)發(fā)環(huán)境）img的樣式

--打包后（即生產(chǎn)環(huán)境）img的樣式

根據(jù)上面可看出打包前和打包后元素所帶的css前綴不一致了。

然后給出的解決方案：

從上面可以看出，vue-cli的開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境都是使用了postcss的，并且配置是一樣的，那么為什么打包前和打包后元素所帶的css前綴不一致呢，

鎖定問(wèn)題

我們可以分析對(duì)比下build/webpack.dev.conf.js和build/webpack.prod.conf.js這兩個(gè)文件，影響css的無(wú)非就module里處理樣式的loader和處理css的插件plugin，從上面可以看出影響前綴的postcss的loader在兩個(gè)環(huán)節(jié)中是一致的，那么就可以知道問(wèn)題出在處理css的插件上了。

經(jīng)過(guò)排查發(fā)現(xiàn)，webpack.prod.conf.js配置里是多了兩個(gè)css處理插件的，如下

ExtractTextPlugin這是提取分離css文件，不會(huì)影響css前綴，排除，那么問(wèn)題就鎖定到OptimizeCSSPlugin插件身上。再進(jìn)一步，當(dāng)我們把OptimizeCSSPlugin插件注釋掉，然后打包測(cè)試，居然發(fā)現(xiàn)這時(shí)開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的css前綴一致了，就是它了?。?！

我們打開(kāi)到npm官網(wǎng)搜一下這家伙

https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

這是一個(gè)優(yōu)化壓縮css代碼的插件，但很失望，文檔說(shuō)明很少

但我們注意到有一句話很關(guān)鍵：

這貨里面依賴了cssnano,這插件也是用來(lái)優(yōu)化處理css格式、前綴什么的。同時(shí)也有個(gè)autoprefixer配置參數(shù)，直接到它官網(wǎng) https://cssnano.co/ 找到autoprefixer：

這里的翻譯是：根據(jù)browsers選項(xiàng)刪除不必要的前綴。請(qǐng)注意，默認(rèn)情況下，它不會(huì)向CSS文件添加新前綴，這就可以解析清除我們的問(wèn)題了，原來(lái)這插件的autoprefixer（默認(rèn)應(yīng)該是為true）把它認(rèn)為不必要的前綴刪掉了，而postcss的autoprefixer是將我們?cè)O(shè)定的瀏覽器范圍的前綴加上，因此完美沖突了

解決問(wèn)題

在build/webpack.prod.conf.js文件中OptimizeCSSPlugin插件的屬性cssProcessorOptions加上autoprefixer：false來(lái)禁用它，避免沖突

上代碼：

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
   ? { safe: true, map: false,autoprefixer:false }
   : { safe: true, autoprefixer: false}
 }),

結(jié)論

最后，看看我們dev和build出來(lái)的css前綴，應(yīng)該就一致的了：

問(wèn)題原因就是：OptimizeCSSPlugin里面依賴了cssnano,而cssnano里面也有一個(gè)autoprefixer配置參數(shù)，它的作用是刪除不必要的前綴（會(huì)誤刪在某些瀏覽器必要的前綴），這與postcss的autoprefixer效果沖突了，因此禁用它?，F(xiàn)在打包出來(lái)的與我們?cè)O(shè)定的瀏覽器范圍對(duì)應(yīng)的前綴一致

按照網(wǎng)上的博主的配置確實(shí)可以把開(kāi)發(fā)環(huán)境和測(cè)試環(huán)境的前綴一模一樣，但是看了下沒(méi)有必要，問(wèn)題的前提不是前綴不一致，那個(gè)配置只是把和當(dāng)前瀏覽器不匹配的前綴不顯示出來(lái)而已，樣式還都是生效的，個(gè)人覺(jué)得如果不是特別大的問(wèn)題不用改配置。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。