|
|
|
@ -1,55 +0,0 @@
|
|
|
|
CSS Modules 是一种局部样式的解决方案,确保样式只作用于特定组件,而不会影响全局。这是通过以下机制和原理来实现的:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 局部样式的概念
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
CSS Modules 的设计目的是将 CSS 类名局部化,从而避免样式冲突。在使用 CSS Modules 时,类名会被自动生成唯一的标识符,以确保它们只在定义它们的组件中有效。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 如何实现局部样式
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 生成唯一类名
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
当您使用 CSS Modules 时,每个类名都会被编译成一个唯一的名称。例如,如果您在 `styles.module.css` 中定义了一个类 `.item`,在编译后,它可能会被转换为类似 `styles_item__1A2B3` 的名称。这样,其他组件中相同的类名不会产生冲突。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 使用方式
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
在 Vue 3 中使用 CSS Modules 时,您需要通过 `import` 语句导入 CSS Module 文件,并通过导入的对象引用样式。这确保了样式只与特定组件关联。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
import styles from './styles.module.css'; // 导入 CSS Module
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class={styles.item}>内容</div> // 使用局部样式
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 原理
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- **编译阶段**:在构建过程中,构建工具(如 Vite 或 Webpack)会处理 CSS Modules,将类名转换为唯一的标识符。这意味着即使在多个组件中使用相同的类名,最终生成的类名也会不同。
|
|
|
|
|
|
|
|
- **作用域限制**:由于生成的类名是唯一的,因此它们只在相应的组件范围内有效,从而避免了全局样式的污染。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 使用示例
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
假设我们有一个样式文件 `styles.module.css`:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
|
|
|
/* styles.module.css */
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
|
|
|
color: blue;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
在组件中使用:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<div class={styles.item}>Hello, World!</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
|
|
import styles from './styles.module.css';
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
在构建后,`.item` 类可能会被转换为 `.styles_item__3A1B2`,并且只在该组件中有效。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 总结
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
CSS Modules 是局部样式的解决方案,通过生成唯一的类名来确保样式只在定义它们的组件中生效。这样可以避免全局样式冲突,保持样式的模块化和可维护性。
|
|
|
|
|