内容简介:我们很多时候写了一个公共的common.scss,然后在各个vue里面由于加了scoped,导致common里面的样式都加上了并且在多少个vue里面import就会打包多少次common.scss进去,最后导致css打出来很大。
公共代码多次放在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 }), ] },
总结:
<style scoped>
//main.js import '@/views/order/style.scss';
//@/views/order/style.scss .order{ xxxxx }
最后把代码按照上面的方法整理了一下,结果打包出来的css足足小了127kb
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 记一次 Spring 项目打包问题排查
- webpack dll打包重复问题优化
- 草率了,又一个 Maven 打包的问题
- CocoaPods 对 Xcode Assets 打包的诡异问题
- 如何解决以太坊上矿工选择性打包的问题?
- VUE-Router路由懒加载,打包问题(下午更改)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。