浅谈vue3 CSS Modules的使用

        1.概述：一个 <style module> 标签会被编译为 CSS Modules 并且将生成的 CSS class 作为 $style 对象暴露给组件，我们可以通过给module属性赋值来自定义class对象的名字。如：<style module="test">, 则生成的 CSS class 将会作为test对象暴露给组件。

        2.实现作用域隔离的原理：CSS Modules是通过将生成的class哈希化，即给该module里面的class通过一定的配置规则生成一个不重复的名字，从而实现样式隔离。

        3.用法如下：

               注意：不能再通过普通的方法去给元素设置class，而是需要以对象的形式去使用指定module里面的class。

               添加多个class可以通过数组的形式添加，也可以对象的形式添加。

<template>
<div :class="[$style['css-demo']]">
    <div>我是css-demo1</div>
    <!-- 添加多个class 数组形式 -->
    <div :class="[$style.text, $style.bg]">class对象默认使用$style作为变量名</div>
    <!-- 添加多个class 对象形式 -->
    <div :class="{[$style.text]: true}">class对象默认使用$style作为变量名</div>
</div>
<div :class="custom['css-demo']">
    <div>我是css-demo2</div>
    <div :class="custom.text">class对象使用自定义变量名</div>
    <div :class="custom.text">class对象使用自定义变量名</div>
</div>
</template>
<!-- 默认使用$style作为变量名 -->
<style module lang="scss">
.css-demo {
    .text{
        color: blue;
        &.bg {
            background-color: #f3f;
        }
    }
}
</style>
<!-- 自定义变量名 -->
<style module="custom" lang="scss">
.css-demo {
    .text {
        color: skyblue;
    }
}
</style>

  从下图可以看出，不同module中同样的类名编译为CSS Modules之后，会生成不同的名字 。

   

        4. useCssModule: 可以通过该API获取指定module的class对象

<script lang="ts" setup>
import { useCssModule } from 'vue';
// 我们可以通过useCssModule来访问对应module的class对象
const def = useCssModule(); // 获取默认的class对象
console.log('def', def);
const custom = useCssModule('custom'); // 获取module名为custom的class对象
console.log('custom', custom);
</script>

  

        5.CSS Modules的应用场景

                一般在jsx、tsx组件内使用，由于无法通过scoped的方式实现样式隔离，所以可以使用CSS Modules来实现样式隔离。