Vite 中如何使用 CSS Modules？

推荐答案

在 Vite 中使用 CSS Modules 非常简单，只需按照以下步骤操作：

1. 创建 CSS 文件：在项目中创建一个 .module.css 文件，例如 styles.module.css。

2. 编写 CSS 代码：在 styles.module.css 文件中编写 CSS 代码，例如：

   .title {
     color: red;
     font-size: 24px;
   }

3. 在组件中引入 CSS Modules：在 Vue 或 React 组件中引入并使用 CSS Modules，例如：

   import styles from './styles.module.css';
   
   export default {
     name: 'MyComponent',
     template: `<div :class="styles.title">Hello, Vite!</div>`
   };

4. 运行项目：启动 Vite 开发服务器，CSS Modules 会自动处理类名，确保样式隔离。

本题详细解读

什么是 CSS Modules？

CSS Modules 是一种 CSS 的模块化解决方案，它通过将 CSS 类名局部化，避免全局样式污染。每个 CSS 文件中的类名都会被编译成唯一的哈希值，确保样式只在当前模块中生效。

如何在 Vite 中使用 CSS Modules？

Vite 默认支持 CSS Modules，只需将 CSS 文件命名为 .module.css 即可启用 CSS Modules 功能。Vite 会自动处理这些文件，并将类名转换为唯一的哈希值。

示例代码解析

1. 创建 CSS 文件：styles.module.css 文件中的 .title 类名会被编译成类似 _title_1h2f3_1 的唯一类名。

2. 在组件中引入 CSS Modules：通过 import styles from './styles.module.css'; 引入 CSS Modules，styles 对象包含了编译后的类名映射。

3. 使用编译后的类名：在模板中使用 :class="styles.title" 绑定编译后的类名，确保样式只在当前组件中生效。

注意事项

• 类名冲突：CSS Modules 可以有效避免类名冲突，但需要注意在多个模块中使用相同的类名时，编译后的类名会不同。
• 动态类名：如果需要动态生成类名，可以使用 styles[className] 的方式。
• 全局样式：如果需要使用全局样式，可以在 CSS 文件中使用 :global 选择器。

通过以上步骤，你可以在 Vite 项目中轻松使用 CSS Modules，实现样式的模块化和隔离。