CSS module
说明 && 原理
- 默认情况下，所有类名称和动画名称都在本地范围内的 CSS 文件
- CSS 模块不是官方规范或浏览器中的实现，而是构建步骤中的一个过程（在 Webpack 或 Browserify 的帮助下），它更改要限定范围的类名称和选择器（即有点像命名空间）
- CSS 的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的 class 的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。
demo
javascript
// 下面是一个组件App.js。
import style from "./App.css";
export default () => {
return <h1 className={style.title}>Hello World</h1>;
};css
/* App.css */
.title {
color: red;
}打包构建后
html
<!-- 构建工具会将类名style.title编译成一个哈希字符串。 -->
<h1 class="_3zyde4l1yATCOkgn-DBWEL">Hello World</h1>css
/* App.css也会同时被编译。 */
._3zyde4l1yATCOkgn-DBWEL {
color: red;
}案例
1. vue 文件 style 的 scope 就是一种实践
html
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>html
<!-- 转换后用自定义属性把类名封装起来了 -->
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>2. vue3 CSS Modules & 与组合式 API 一同使用
CSS Modules
- 一个
<style module>标签会被编译为 CSS Modules 并且将生成的 CSS class 作为 $style 对象暴露给组件：
html
<template>
<p :class="$style.red">This should be red</p>
</template>
<style module>
.red {
color: red;
}
</style>
和组合式 API 使用
- 可以通过 useCssModule API 在 setup() 和
<script setup>中访问注入的 class。对于使用了自定义注入名称的<style module>块，useCssModule 接收一个匹配的 module attribute 值作为第一个参数
javascript
import { useCssModule } from "vue";
// 在 setup() 作用域中...
// 默认情况下, 返回 <style module> 的 class
useCssModule();
// 具名情况下, 返回 <style module="classes"> 的 class
useCssModule("classes");