跳到主要内容

认识

2023年05月10日
柏拉文
越努力，越幸运

一、认识​

<style module><style> 标签会被编译为 CSS Modules 并且将生成的 CSS class 作为 $style 对象暴露给组件

二、语法​

2.1 $style 通过默认名称访问​

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。

2.2 $style 通过自定义名称访问​

你可以通过给 module attribute 一个值来自定义注入 class 对象的属性名

<template>
  <p :class="classes.red">red</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

2.3 通过组合式 API useCssModule 访问​

可以通过 useCssModule API 在 setup() 和 <script setup> 中访问注入的 class。对于使用了自定义注入名称的 <style module> 块，useCssModule 接收一个匹配的 module attribute 值作为第一个参数:

import { useCssModule } from 'vue'

// 在 setup() 作用域中...
// 默认情况下, 返回 <style module> 的 class
useCssModule()

// 具名情况下, 返回 <style module="classes"> 的 class
useCssModule('classes')