在vue中使用css modules替代scroped的方法

2023-09-15 15:06:06 67

前面的话

cssmodules是一种流行的模块化和组合CSS的系统。vue-loader提供了与cssmodules的集成，作为scopeCSS的替代方案。本文将详细介绍cssmodules

引入

最开始使用Vue的时候，提倡并大量使用的是scoped这种技术


@media(min-width:250px){
.list-container:hover{
background:orange;
}
}

这个可选scoped属性会自动添加一个唯一的属性(比如data-v-21e5b78)为组件内CSS指定作用域，编译的时候.list-container:hover会被编译成类似.list-container[data-v-21e5b78]:hover

但是，它并不能完全避免冲突

用户名不得为空

以上面的代码为例，使用scoped之后，它在元素上添加了一个唯一的属性'data-v-0467f817'，CSS样式被编译如下

.errShow[data-v-0467f817]{
font-size:12px;
color:red;
}

但是，如果用户也定义了一个errShow类名，会影响到所有定义为errShow类名的组件的显示

而CSSmodules则做的更彻底，它不是添加属性，而是直接改变类名

用户名不得为空

这样，大大降低了冲突的可能性，只要不是用户直接给span标签设置样式，基本上不会影响组件的显示

模块化

CSSModules既不是官方标准，也不是浏览器的特性，而是在构建步骤中对CSS类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式

实际上，CSSModules只是CSS模块化的一种方式。为什么我们需要CSS模块化呢？

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。于是，亟待解决的就是样式冲突（污染）的问题。一般地，为了解决冲突，会把class命名写长一点，降低冲突几率；加上父元素的选择器，来限制范围等

CSS模块化就是来解决这个问题的，一般地，分为三类

1、命名约定类

该类CSS模块化方案主要用来规范CSS命名，最常见的是BEM，当然还有OOCSS等，在构建工具出现之前，大多数都是在CSS命名上做文章

2、CSSinJS

彻底抛弃CSS，用javascript来写CSS规则，常见的有styled-components

3、使用JS来管理样式

使用JS编译原生的CSS文件，使其具备模块化的能力，最常见的就是CSSModules

随着构建工具的兴起，越来越多的人开始使用后两者方案，书写CSS时，不用再特意地关心样式冲突问题。只需要使用约定的格式编写代码即可

写法

下面来介绍CSSmodules的写法

在style标签中添加module属性，表示打开CSS-loader的模块模式


.red{color:red;}

在模板中使用动态类绑定:class，并在类名前面加上'$style.'

如果类名包含中划线，则使用中括号语法

类别推荐

也可以使用数组或对象语法


AmIred?


Redandbold

更复杂的对象语法


更复杂的数组语法

配置
css-loader关于CSSmodules的默认配置如下
{
modules:true,
importLoaders:1,
localIdentName:'[hash:base64]'
}

可以使用vue-loader的cssModules选项为css-loader进行自定义的配置
module:{
rules:[
{
test:'\.vue$',
loader:'vue-loader',
options:{
cssModules:{
localIdentName:'[path][name]---[local]---[hash:base64:5]',
camelCase:true
}
}
}
]
}


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

在vue中使用css modules替代scroped的方法

热门推荐

随机推荐