公共代码多次放在 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