Vite 中如何正确处理 CSS 模块化？

南宫桂霞提问于 2026-03-04 10:04:19 阅读 54

工具

我在用 Vite 开发 React 项目，想用 CSS Modules 来避免样式冲突，但发现样式没生效。

我创建了 Button.module.css 文件，并在组件里这样引入：

import styles from './Button.module.css';

function Button() {
  return <button className={styles.btn}>Click me</button>;
}

结果页面上按钮完全没有样式，控制台也没报错。是不是 Vite 默认不支持 CSS Modules？还是我命名方式不对？

我来解答赞 10 收藏

反馈

2 条解答

A. 俊贺 Lv1

在 Vite 中使用 CSS Modules 是完全支持的，不过有时候小细节没注意会导致样式不生效。从你提供的信息来看，问题可能出在文件命名或者配置上。

首先确保你的 CSS 文件名是以 .module.css 结尾的，你这个已经对了。然后检查一下 Button.module.css 文件的内容，确保里面有一个 .btn 的样式定义，例如：

.btn {

  background-color: blue;

  color: white;

  padding: 10px 20px;

  border: none;

  border-radius: 5px;

}

接下来确认一下你的 Vite 配置文件 vite.config.js 中是否有相关的 CSS Modules 配置。虽然 Vite 默认支持 CSS Modules，但如果你有自定义配置，可能会覆盖默认行为。确保你的配置里没有误删或修改关于 CSS Modules 的部分。

最后，有时候缓存也会导致样式不生效，尝试清除浏览器缓存或者重启开发服务器看看能不能解决问题。

如果这些都检查过了还是不行，可以提供一下 Button.module.css 文件的内容和 Vite 配置文件的关键部分，这样我可以更具体地帮你排查问题。更好的写法是尽量保持模块化和一致性，确保每个组件的样式都通过对应的模块文件引入，避免全局样式污染。

2026-03-24 20:02

迷人的红会 Lv1

Vite 是原生支持 CSS Modules 的，不需要像 Webpack 那样搞一堆 loader 配置，你的文件命名和引入方式完全符合官方规范。只要文件名是 .module.css 后缀，Vite 就会自动处理。

既然控制台没报错，问题大概率出在 CSS 类名和 JavaScript 对象属性的映射上。推荐的做法是先在组件里打印一下这个 styles 对象，看看导出的 key 到底是什么。

你可以加一行调试代码：

import styles from './Button.module.css';



function Button() {

  console.log(styles); // 看看这里打印出来的对象结构

  return <button className={styles.btn}>Click me</button>;

}

如果你的 CSS 文件里类名写的是带短横线的，比如 .btn-primary，那在 JS 里直接用 styles.btn 是取不到值的。Vite 默认会把类名转成驼峰式，所以你应该用 styles.btnPrimary，或者用中括号语法 styles['btn-primary']。当然，最稳妥的方式还是 CSS 里也直接写成 .btn，保持和 JS 属性名一致，省得去猜转换规则。

确认一下 CSS 文件里真的有 .btn { ... } 这个类，别光建了个文件没写样式，这种低级错误我也干过。

2026-03-04 10:17