Taro 中如何正确使用 CSS Modules 避免样式污染？

公孙一诺提问于 2026-03-21 18:38:17 阅读 4

框架

我在 Taro 项目里尝试用 CSS Modules 写组件样式，但发现类名没被局部化，还是全局生效了，是不是配置有问题？

我的文件是 index.module.css，也按文档 import 了，但样式照样影响其他页面。试过重启 dev server 也没用。

.container {
  padding: 20px;
  background-color: #f5f5f5;
}

.title {
  font-size: 18px;
  color: #333;
}

我来解答赞 1 收藏

反馈

1 条解答

___树衡 Lv1

问题应该出在 Taro 的配置上。Taro 默认情况下可能没有开启 CSS Modules 或者配置不正确。你需要检查一下项目的 config/index.js 文件，确保里面有正确的 CSS Modules 配置。通常情况下，你需要添加或者修改 cssLoaderOption 来启用 CSS Modules。你可以试试加个类似这样的配置：

cssLoaderOption: {

  modules: {

    localIdentName: '[name]__[local]___[hash:base64:5]',

  },

},

这个配置会确保你的 CSS 类名被局部化。记得保存配置文件后重启开发服务器。如果还不行，检查一下你的 CSS 文件是否正确导入了，确保路径没有问题。有时候小细节真够人抓狂的。

2026-03-21 19:00