前言
在公司項(xiàng)目發(fā)布上線后，出現(xiàn)了部分樣式失效的問題。我們引用的是vuetify第三方庫，經(jīng)過檢查，發(fā)現(xiàn)是部分樣式被vuetify自帶的css樣式給覆蓋，原因是生成環(huán)境的打包模式與開發(fā)環(huán)境不同。
打包模式的區(qū)別
- 生產(chǎn)模式（env.prod）
在
生產(chǎn)模式下打包，項(xiàng)目會(huì)被最小化，所有的css代碼會(huì)被提取出來放在同一文件夾下（這也是上線后樣式出現(xiàn)問題的根本原因）
- 開發(fā)模式
開發(fā)模式打包并不會(huì)改變項(xiàng)目的層次結(jié)構(gòu)，換句話說，我們在寫代碼過程中，頁面長啥樣，打包上線后就是原本的樣式，該模式下并不會(huì)改變代碼。但是該模式打包后的dist文件依舊比生產(chǎn)模式打包后的項(xiàng)目大很多。
案例
首先我們要知道為什么vuetify的樣式會(huì)覆蓋自定義樣式，因?yàn)樽远x的樣式優(yōu)先級(jí)不夠高！在生產(chǎn)模式下，所有css代碼會(huì)被提取到一個(gè)文件夾下，而第三方庫的css一般會(huì)多個(gè)類名綁定（例如: .themelight .v-btn），如果自定義樣式只綁定一個(gè)類名（沒有在父類的作用域下），樣式優(yōu)先級(jí)不夠高，就會(huì)被覆蓋。
解決方案
- 方案一：配置
vue.config.js文件
在
vue.config.js文件中將css的extract設(shè)置為false，生產(chǎn)環(huán)境打包默認(rèn)為true，這個(gè)選項(xiàng)會(huì)把css代碼提取到一個(gè)文件夾下。注意：開發(fā)環(huán)境的extract選項(xiàng)默認(rèn)為false
const webpack = require('webpack')
module.exports = {
css: {
extract: false
}
};
- 方案二：覆蓋第三方組件原有的類，或者加樣式穿透
當(dāng)我們想修改第三方組件的樣式時(shí)，可以選擇覆蓋其原有的類
<template>
<div class="button-box">
<v-btn>Submit</v-btn>
</div>
</template>
<style lang="sass" scoped>
.button-box
//v-btn是當(dāng)前組件已有的類，在這里設(shè)置屬性可以覆蓋原有的
.v-btn
color:#020202
</style>
也可使用
>>>來提升樣式優(yōu)先級(jí)，俗稱樣式穿透文章來源：http://www.zghlxwxcb.cn/news/detail-514302.html
<template>
<div class="button-box">
<v-btn class="submit-btn">Submit</v-btn>
</div>
</template>
<style lang="sass" scoped>
.button-box >>> .submit-btn
color: #020202
</style>
- 方案三：該方案用于解決緊急情況下需要發(fā)布上線（并不能縮小打包后的體積）
在.env.production文件中修改環(huán)境變量文章來源地址http://www.zghlxwxcb.cn/news/detail-514302.html
// 本應(yīng)該是production，這里緊急解決問題，可改為develop，以開發(fā)環(huán)境的打包模式發(fā)布上線
NODE_ENV = 'develop'
到了這里，關(guān)于Vue項(xiàng)目打包問題（生產(chǎn)環(huán)境樣式失效）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
