本篇文章主要介绍了在vue中使用css modules替代scroped的方法，现在分享给大家，也给大家做个参考。
前面的话
css modules是一种流行的模块化和组合CSS的系统。 vue-loader提供了与css modules的集成，作为scope CSS的替代方案。本文将详细介绍css modules
引入
最开始使用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类名的组件的显示
而CSS modules则做的更彻底，它不是添加属性，而是直接改变类名
用户名不得为空
登录后复制登录后复制
这样，大大降低了冲突的可能性，只要不是用户直接给span标签设置样式，基本上不会影响组件的显示
模块化
CSS Modules既不是官方标准，也不是浏览器的特性，而是在构建步骤中对CSS类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式
实际上，CSS Modules只是CSS模块化的一种方式。为什么我们需要CSS模块化呢？
CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。于是，亟待解决的就是样式冲突（污染）的问题。一般地，为了解决冲突，会把class命名写长一点，降低冲突几率；加上父元素的选择器，来限制范围等
CSS模块化就是来解决这个问题的，一般地，分为三类
1、命名约定类
该类CSS模块化方案主要用来规范CSS命名，最常见的是BEM，当然还有OOCSS等，在构建工具出现之前，大多数都是在CSS命名上做文章
2、CSS in JS
彻底抛弃CSS，用javascript来写CSS规则，常见的有styled-components
3、使用JS来管理样式
使用JS编译原生的CSS文件，使其具备模块化的能力，最常见的就是CSS Modules
随着构建工具的兴起，越来越多的人开始使用后两者方案，书写CSS时，不用再特意地关心样式冲突问题。只需要使用约定的格式编写代码即可
写法
下面来介绍CSS modules的写法
在style标签中添加module属性，表示打开CSS-loader的模块模式
.red {color: red;}
登录后复制
在模板中使用动态类绑定:class，并在类名前面加上’$style.’
This should be red
登录后复制
如果类名包含中划线，则使用中括号语法
类别推荐
登录后复制
也可以使用数组或对象语法
Am I red?
Red and bold
登录后复制
更复杂的对象语法
登录后复制登录后复制
更复杂的数组语法
登录后复制登录后复制
配置
css-loader关于CSS modules的默认配置如下
{ 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 } } } ]}
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
nodejs acl的用户权限管理详解
nodejs acl的用户权限管理详解
nodejs acl的用户权限管理详解
以上就是vue使用css能够把modules替代scroped有哪些方法？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2752913.html
