这次给大家带来Vue内使用scoped css和css module区别有哪些，Vue内使用scoped css和css module的注意事项有哪些，下面就是实战案例，一起来看一下。
scoped css
官方文档
scoped css可以直接在能跑起来的vue项目中使用。
使用方法：
h1 { color: #f00;}
登录后复制
使用scoped划分本地样式的结果编译结果如下：
h1[data-v-4c3b6c1c] { color: #f00;}
登录后复制
即在元素中添加了一个唯一属性用来区分。
缺点
一、如果用户在别处定义了相同的类名，也许还是会影响到组件的样式。
二、根据css样式优先级的特性，scoped这种处理会造成每个样式的权重加重了：
即理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。
所以在引用包含scoped的第三方插件时如若需要修改样式则需要全局修改，而且要注意权重问题，0.0迫不得已再使用!important。
三、如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性：
所以一般父组件如果加了scoped，会比已经设置过自己样式的子组件内除最外层标签的内层标签的权重低，影响不到他们的样式。
不过也是可以通过如下方法影响到的：
四、scoped会使标签选择器渲染变慢很多倍
官方给了一些注意事项如下：
我们可以看到用标签选择器时scoped会严重降低性能，而使用class或id则不会。
css module
官方文档
css module需要增加css-loader配置才能生效，具体可看文档的实现。
注意
如果你使用的是style-loader，如果想让配置生效需要更换到文档所述的vue-style-loader。
二者区别可以从这里了找vue-style-loader
使用如下：
Im gray
.gray { color: gray;}
登录后复制
使用module的结果编译如下：
Im gray
.gray_3FI3s6uz { color: gray;}
登录后复制
由此可见，css module直接替换了类名，排除了用户设置类名影响组件样式的可能性。
这样$style.red就可以当做一个变量，并且可以在js中使用，如下：
export default { created () { console.log(this.$style.gray) // -> "gray_3FI3s6uz" // 一个基于文件名和类名生成的标识符 }}
登录后复制
我们可以看到，module在使用时多出了绑定和$style，如果你想更优雅，可以看一下这个vue-css-modules。
使用css module在keyframes中的问题
使用CSS modules处理动画animation的关键帧keyframes，动画名称必须先写。
animation: ani 1s;能正常编译，而animation: 1s ani;则会编译的不符合预期，所以平时养成良好的css参数书写顺序也很重要。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
应该如何搭建webpack+react开发环境
Node.js Buffer使用详解
如何搭建React全家桶环境
立即学习“前端免费学习笔记（深入）”；
以上就是Vue内使用scoped css和css module区别有哪些的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2755146.html
