Vue3的CSSModules和Scope怎么使用

这篇文章主要讲解了“Vue3的CSS Modules和Scope怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3的CSS Modules和Scope怎么使用”吧！

为安平等地区用户提供了全套网页设计制作服务，及安平网站建设行业解决方案。主营业务为成都做网站、成都网站设计、安平网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

Css Modules 是通过对标签类名进行加装成一个独一无二的类名，比如.class 转换成.class_abc_123,类似于symbol，独一无二的键名

Css Scope 是通过为元素增加一个自定义属性，这个属性加上独一无二的编号，而实现作用域隔离。

原理

CSS Modules

CSS Modules实现CSS模块化的原理就是根据我们在config文件中定义的类名命名规则给类生成一个独一无二的命名，从而实现作用域的隔离。

• 转化前

  .title {
    font-size: 14px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
    color: #13161b;
  }
  .name {
    display: flex;
    align-items: center;
    &-img {
      width: 24px;
      height: 24px;
      border-radius: 4px;
    }
    &-text {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #13161b;
    }
  }

   cell: (h, { col, row }) => {
      // console.log(style);
      return (
        
          
          {row.name}
        
      );
    },

• 转化后

标签.name-img 被转化成了_name_img_6hlfj_11等

Scoped CSS

Vue Loader默认使用CSS后处理器PostCSS来实现Scoped CSS，原理就是给声明了scoped的样式中选择器命中的元素添加一个自定义属性，再通过属性选择器实现作用域隔离样式的效果。

• 转化前

.example {
  color: red;
}

• 转化后

应用

CSS Modules

关于应用，这里只针对介绍Vue3版本内的使用问题

在 Vue3 中，CSS Modules，在 .success {   color: pink; } .success {   color: blue; }

注意，同名的CSS Module，后面的会覆盖前面的。

针对module命名区分，主要也是应用在JSX和TSX的组件中居多

Jsx和Tsx组件内应用

对于 JSX、TSX 组件，由于其没办法用 scoped style，所以 CSS Modules 是个很好的选择:

比如在script里面写h函数,直接使用样式变量

   cell: (h, { col, row }) => {
      // console.log(style);
      return (
        
          
          {row.name}
        
      );
    },

比如render函数

.span1 {
  color: blue;
  font-size: 40px;
}

:global选择器

在Scope或者Module中使用global时

:global()允许括号中声明的选择器命中全局，即其类名不会经过规则封装，因此不受作用域的限制。

实际项目中，当我们希望修改所使用组件库的默认样式时，在使用CSS Modules方案的情况下，就可以通过:global()来修改其默认样式，但是要注意最好外面有一层类封装，否则可能影响全局样式。

:deep深度作用选择器

深度作用选择器使得父组件的样式可以渗透到子组件，其原理是使用后代选择器。

/* 转化前 */

.a :deep(.b) {
  /* ... */
}


/* 转化后 */
.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样式是全局起效的。

感谢各位的阅读，以上就是“Vue3的CSS Modules和Scope怎么使用”的内容了，经过本文的学习后，相信大家对Vue3的CSS Modules和Scope怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！