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

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

工具

我在用 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？还是我命名方式不对？

我来解答赞 4 收藏

反馈

1 条解答

迷人的红会 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