关于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 }), ]},总结：把css变量单独拎出来做一个文件variable.scss，在vue的<style scoped>里@import使用公共css文件在main.js里面直接import一次就好，不要再在其他vue里面import多人协作防止冲突，各组件的公共css文件我觉得可以在外面用一个自己的class包裹起来。例如//main.jsimport ‘@/views/order/style.scss’;//@/views/order/style.scss.order{ xxxxx}最后把代码按照上面的方法整理了一下，结果打包出来的css足足小了127kb