众所周知，vue中单个文件的css样式加上scoped属性后很方便。不需要我们前端绞尽脑汁的想究竟给元素起啥名。实现了样式的私有化。那么实现样式私有化的原理你知道吗？
vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。给HTML的DOM节点加个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性
在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
大家都知道css样式有一个优先级的说法，scoped的这一操作，虽然达到了组件样式模块化的目的，但是会造成一种后果：每个样式的权重加重了：理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。
我的项目需求是实现用户可以改变网站的主题色。很容易想到利用less语法可以实现。于是我对项目进行了配置了less之后，发现写在less中并不能改变颜色。这就是因为在每一个单个的.vue文件中我都是用了scoped属性，less中的样式权重不及scoped。只需要把scoped属性去掉即可。但这又牵扯到类名重复样式错乱的问题。
网友评论