JavaScript 中怎么在 Vite 中配置 CSS Modules 模块化样式-js教程-PHP中文网

vite 中 css modules 开箱即用，需遵守三规则：文件名必须含 .module. 前缀（如 button.module.css）；导入必须通过模块对象（import styles from './button.module.css'）；避免在模块内引入全局样式或混用全局类名。

javascript 中怎么在 vite 中配置 css modules 模块化样式

Vite 中配置 CSS Modules 不需要手动开启，它是开箱即用的，关键在于**按规则命名文件、正确导入使用、避免破坏模块化行为**。只要做对这几点，样式自动隔离，类名不会全局冲突。

文件名必须带 .module. 前缀

Vite 仅识别 .module.css、.module.scss、.module.less 这类后缀的文件为 CSS Modules。这是硬性约定，大小写敏感，缺一不可：

✅ 正确：Button.module.css、Header.module.scss、utils.module.less
❌ 错误：Button.css（当普通 CSS 处理）、button.Module.css（大小写错）、styles.module（没后缀）、Component.module.CSS（大写后缀）

导入和使用必须走模块对象

CSS Modules 导出的是一个 JS 对象，键是类名，值是生成后的唯一哈希类名：

✅ 正确：import styles from './Button.module.css'; + <button classname="{styles.btn}"></button>
❌ 错误：<button classname="btn"></button>（绕过模块化，直接写死类名）
❌ 避免混用：className={`${styles.btn} extra-class`} 中的 extra-class 是全局类，可能污染或被覆盖

别在模块文件里引入全局样式

如果在 Button.module.css 里写 @import '../reset.css'，那 reset.css 会以全局方式注入，破坏隔离：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

✅ 全局样式（如 reset、variables、theme）统一放在 src/styles/ 下，只在 main.jsx/ts 中导入一次
✅ 想复用其他组件样式？用 composes 引入另一个 .module.* 文件，例如：@value btn from './BaseButton.module.css';

可选：自定义哈希提升唯一性

默认哈希较短，大型项目中极小概率碰撞。可在 vite.config.js 中增强：

vite.config.js

export default defineConfig({
  css: {
    modules: {
      generateScopedName: '[name]__[local]___[hash:base64:8]',
      hashPrefix: 'myapp-'
    }
  }
})

这样 Button.module.css 中的 .btn 会变成 Button__btn___a1b2c3d4，而 Modal.module.scss 的同名 .btn 是 Modal__btn___e5f6g7h8，彻底隔离。