2.此组件的所用的css,都会被设置为属性选择器例如下:
3.通过css的属性选择器从而解决了多个组件重复的class,会导致冲突的问题
最开始使用Vue的时候,是提倡并大量使用的是scoped的。
加上 scoped 属性的style会自动添加一个唯一的属性 。比如data-v-0467f817为组件内 CSS 指定作用域,编译的时候 .errShow会被编译成类似 .errShow[data-v-0467f817]。
这种添加唯一的属性的方法可以满足日常组件局部css作用域的开发需求,但其设计上有一定缺陷,.errShow[data-v-0467f817]并不能保证是唯一的,另外在性能上也不是很好,浏览器搜索.errShow[data-v-0467f817]的速度并不如.errShow,相比于这种方式,CSS modules则做的更彻底,它不是添加属性,而是直接改变类名。
CSS Modules
CSS Modules既不是官方标准,也不是浏览器的特性,而是在构建步骤中对CSS类名选择器限定作用域的一种方式(通过hash实现类似于命名空间的方法)。类名是动态生成的,唯一的,并准确对应到源文件中的各个类的样式。
用法
配置
如果你的项目是用vue-cli搭建的,那么脚手架已经为你配置好了,直接可以使用,如果你是用webpack自己搭建的项目或想要修改默认配置,则进行下面配置。
css-loader关于CSS modules的默认配置如下:
可以使用vue-loader的css Modules选项为css-loader进行自定义的配置
Vue3对CSS支持加入了更多的特性支持,这样的话,我们在项目当中使用CSS就变得更加灵活了,来吧我们直接上干货
在style的标签上加一个module的属性,这样style里面的内容就会被编译成CSS Modules(模块),默认情况下,我们可以在模板代码里,或者JS里通过$style拿到所有样式属性并使用
我们也可以给CSS Modules自定义一个名称,在style的module属性设置一个名称就可以了,这样的话在模板和JS里就通过自定义的名称来引入CSS里的属性
与组合式 API 一同使用,注入的类可以通过 useCssModule API 在 setup() 和.success { color: #090}
可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上
这个语法同样也适用于