為了使我們的項目兼容各種瀏覽器，我們可能會在開發(fā)中寫大量的前綴。即使有了IDE為我們提供了邊界的方式。但是仍然需要我們?nèi)セ〞r間和精力。而這樣會浪費我們很多的時間。為了在開發(fā)中提升團隊的開發(fā)效率，并且同時節(jié)省時間，我們引入了autoprefixed。搭配webpack使用，在每次打包的時候自動的給我們的樣式加上前綴來兼容不同的瀏覽器。
安裝依賴包
如果你是使用vue-cli構(gòu)建的項目。首先執(zhí)行以下代碼安裝依賴包。
npm install autoprefixer postcss postcss-loader -D
修改vue-loader配置文件
修改目錄/build/vue-loader.conf.js文件。文件的原本代碼應(yīng)該如下。
module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config[buildEnv].productionSourceMap : config.dev.cssSourceMap, extract: isProduction })}將以上代碼，替換成如下代碼。
module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config[buildEnv].productionSourceMap : config.dev.cssSourceMap, extract: isProduction }), postcss: [require('autoprefixer')({browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8']})]}修改utils
打開/build/utils.js，定位到如下代碼。
postcss: generateLoaders()
將上面的代碼更改為如下代碼。
postcss: generateLoaders(['css?-autoprefixer'])
重新啟動項目，就可以通過chrome的開發(fā)者工具，可以看到編譯后的css文件，會自動的加上兼容性的前綴。就可以放心的寫css代碼了。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
