公共代碼多次放在scoped內
我們很多時候寫了一個公共的common.scss,然後在各個vue裏面
<style scoped>
import '@/assets/css/common.scss'
</style>
由於加了scoped,導致common裏面的樣式都加上了[data-v-aaaa]
這樣的標識,最後打出來的css重複,這就不是公共css了。
並且在多少個vue裏面import就會打包多少次common.scss進去,最後導致css打出來很大。
公共代碼多次放在scoped外
下面的代碼打包出來只會有一份global.scss,也就是不會重複打包。所以爲了方便,直接在main.js引入一次就夠了
//a.vue
<style >
@import '@/assets/css/global.scss'
</style>
//b.vue
<style >
@import '@/assets/css/global.scss'
</style>
公共代碼放scoped外,自定義代碼放scoped內
爲了不重複打包,那我把公共的css代碼拿出來不放在scoped裏面不就好了。
//global.scss
.white{ color:#fff}
//a.vue
<style >
@import '@/assets/css/global.scss'
</style>
但是下面這個情況不行,運行會報錯:$white is not defined
// variable.scss
$white:#fff;
//a.vue
<style >
@import '@/assets/css/variable.scss'
</style>
<style scoped>
.white{
color:$white;
}
<style/>
然後試了一下
<style scoped>
@import '@/assets/css/variable.scss'
.white{
color:$white;
}
</style>
發現打出來的css裏面變量$white直接編譯成#fff了,打包後的css裏面找不到$white,所以就不用擔心會重複打包這些變量了。
IE瀏覽器對css的約束
之前控制檯中心在IE9瀏覽器下樣式混亂。說是IE瀏覽器對css有些約束
Stylesheet Limits in Internet Explorer
然後用了下面兩個插件解決。好像也可以設置splitChunk解決,不過試了效果不太滿意,後面再繼續探究。
optimization: {
minimizer: [
new CSSSplitWebpackPlugin({
size: 4000,
filename: path.posix.join(assetsDir,'css/[name]-[part].[ext]'),
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: {removeAll: true },reduceIdents:false },
canPrint: true
}),
]
},
總結:
- 把css變量單獨拎出來做一個文件variable.scss,在vue的
<style scoped>
裏@import使用 - 公共css文件在main.js裏面直接import一次就好,不要再在其他vue裏面import
- 多人協作防止衝突,各組件的公共css文件我覺得可以在外面用一個自己的class包裹起來。例如
//main.js
import '@/views/order/style.scss';
//@/views/order/style.scss
.order{
xxxxx
}
最後把代碼按照上面的方法整理了一下,結果打包出來的css足足小了127kb