189 8069 5689

在vue中怎么使用cssmodules替代scroped-创新互联

这篇文章主要介绍在vue中怎么使用css modules替代scroped，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

按需定制开发可以根据自己的需求进行定制，网站制作、成都网站制作构思过程中功能建设理应排到主要部位公司网站制作、成都网站制作的运用实际效果公司网站制作网站建立与制做的实际意义

引入

最开始使用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.'

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

类别推荐

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

  
   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
    }
   }
  }
 ]
}
    以上是“在vue中怎么使用css modules替代scroped”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
    另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
                
    
            新闻标题：在vue中怎么使用cssmodules替代scroped-创新互联            
    
            网站URL：http://cdxtjz.cn/article/djspoe.html

    • 其他资讯