Vue3学习之深度剖析CSS Modules和Scope

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

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

原理

CSS Modules

CSS Modules实现CSS模块化的原理就是根据我们在config文件中定义的类名命名规则给类生成一个独一无二的命名，从而实现作用域的隔离。【相关推荐：vuejs视频教程、web前端开发】

• 转化前

<style module>
  .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;
    }
  }
</style>

   cell: (h, { col, row }) => {
      // console.log(style);
      return (
        <span class={style.name}>
          <img src={testImage} class={style[&#39;name-img&#39;]} />
          <span class={style[&#39;name-text&#39;]}>{row.name}</span>
        </span>
      );
    },

• 转化后

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

Scoped CSS

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

• 转化前

<template>
  <div class="example">hi</div>
</template>
<style module>
.example {
  color: red;
}
</style>

• 转化后

<!-- 用自定义属性把类名封装起来了 -->
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

应用

CSS Modules

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

在 Vue3 中，CSS Modules，在