这篇文章主要讲解了“Vue3的CSS Modules和Scope怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3的CSS Modules和Scope怎么使用”吧!
为安平等地区用户提供了全套网页设计制作服务,及安平网站建设行业解决方案。主营业务为成都做网站、成都网站设计、安平网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
Css Modules 是通过对标签类名进行加装成一个独一无二的类名,比如.class 转换成.class_abc_123,类似于symbol,独一无二的键名
Css Scope 是通过为元素增加一个自定义属性,这个属性加上独一无二的编号,而实现作用域隔离。
CSS Modules实现CSS模块化的原理就是根据我们在config文件中定义的类名命名规则给类生成一个独一无二的命名,从而实现作用域的隔离。
转化前
cell: (h, { col, row }) => {
// console.log(style);
return (
{row.name}
);
},
转化后
标签.name-img 被转化成了_name_img_6hlfj_11等
Vue Loader默认使用CSS后处理器PostCSS来实现Scoped CSS,原理就是给声明了scoped的样式中选择器命中的元素添加一个自定义属性,再通过属性选择器实现作用域隔离样式的效果。
转化前
转化后
关于应用,这里只针对介绍Vue3版本内的使用问题
在 Vue3 中,CSS Modules,在 上增加 module 属性,即
。
代码块会被编译为 CSS Modules 并且将生成的 CSS 类作为
$style
对象的键暴露给组件,可以直接在模板中使用 $style
。而对于如 具名 CSS Modules,编译后生成的 CSS 类作为
content
对象的键暴露给组件,即module
属性值什么,就暴露什么对象。
注意,同名的CSS Module,后面的会覆盖前面的。
针对module命名区分,主要也是应用在JSX和TSX的组件中居多
对于 JSX、TSX 组件,由于其没办法用 scoped style,所以 CSS Modules 是个很好的选择:
比如在script里面写h函数,直接使用样式变量
cell: (h, { col, row }) => {
// console.log(style);
return (
{row.name}
);
},
比如render函数
在Scope或者Module中使用global时
:global()允许括号中声明的选择器命中全局,即其类名不会经过规则封装,因此不受作用域的限制。
实际项目中,当我们希望修改所使用组件库的默认样式时,在使用CSS Modules方案的情况下,就可以通过:global()来修改其默认样式,但是要注意最好外面有一层类封装,否则可能影响全局样式。
深度作用选择器使得父组件的样式可以渗透到子组件,其原理是使用后代选择器。
/* 转化前 */
/* 转化后 */
.a[data-v-f3f3eg9] .b {
/* ... */
}
实际项目中,当我们希望修改所使用组件库的默认样式时,在使用Scoped CSS方案的情况下,就可以通过深度作用选择器来修改其默认样式。
几种深度左右选择器的写法:
/deep/:已废弃
'>>>':在不使用Sass预处理器时可以使用
::v-deep:使用Sass预处理器时使用
但是在Vue3中,已经作出了改进如下:
深度作用选择器废弃/deep和>>>,使用 :deep(.child-class)来替代::v-deep
:slotted()选择器支持使用:slotted(selector)来控制slot中的样式
:global()选择器当只有某些规则需要全局起效时,允许不重复声明一个全局作用域的style标签,而是使用:global(selector)来声明为全局样式。
深度作用选择器deep和声明为global样式的区别,深度作用选择器只是为了能让父组件控制子组件样式,而global样式是全局起效的。
CSS Modules | Scoped CSS |
---|---|
需要在vue.config.js中额外配置 | Vue Loader默认支持,无需额外配置 |
通过根据配置的类命名规则,为元素生成独一无二的类名来实现作用域隔离 | 通过给元素自定义hash属性,再使用属性选择器选中元素来实现作用域隔离 |
在style标签中声明module | 在style标签中声明scoped |
支持导入其他module的样式,支持样式组合 | / |
通过:global()来解除作用域的隔离,使样式在全局生效 | 1. 可以定义全局样式,使样式不受作用域约束;2. 可以通过深度作用选择器命中子组件,从而控制子组件的样式 |
感谢各位的阅读,以上就是“Vue3的CSS Modules和Scope怎么使用”的内容了,经过本文的学习后,相信大家对Vue3的CSS Modules和Scope怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!