Taro 中使用 CSS Modules 为啥样式没生效？

司空梓童提问于 2026-03-29 23:12:14 阅读 4

框架

我在 Taro 项目里尝试用 CSS Modules 写组件样式，但发现类名没被编译成哈希值，样式也没应用上。我明明把文件命名为 index.module.css 了啊。

这是我的样式代码：

.container {
  display: flex;
  padding: 20px;
  background-color: #f5f5f5;
}
.title {
  font-size: 18px;
  color: #333;
}

JSX 里也用了 styles.container 这种方式引入，但页面上完全没样式，控制台也没报错，到底哪里出问题了？

Taro 样式方案

我来解答赞 0 收藏

反馈

1 条解答

彦杰 ☘︎ Lv1

在 Taro 里用 CSS Modules 有几个关键点容易被忽略。首先检查一下你的配置文件，确保已经开启了 CSS Modules 支持。

一般需要在 config/index.js 或对应的配置文件中添加这个配置：

const config = {

  module: {

    rules: [

      {

        test: /.module.css$/,

        use: [

          'style-loader',

          { loader: 'css-loader', options: { modules: true } }

        ]

      }

    ]

  }

}

另外要注意的是，在 JS 文件中引用样式的方式。不是直接使用 styles.container，而是要先导入模块：

import styles from './index.module.css'

然后才能正常使用 styles.container 这种写法。

可以优化成这种结构：

import Taro, { Component } from '@tarojs/taro'

import { View } from '@tarojs/components'

import styles from './index.module.css'



class MyComponent extends Component {

  render () {

    return (

      

        Hello World

      

    )

  }

}

这几个地方都确认无误的话，样式应该就能正常生效了。折腾这些工具链真是够累的，但弄通了确实能让代码更优雅些。

2026-03-30 00:01