taro CSS Modules 的使用

最新推荐文章于 2025-05-16 08:39:43 发布

weixin_33724059

最新推荐文章于 2025-05-16 08:39:43 发布

阅读量3.5k

点赞数 1

本文详细介绍如何在Taro框架中开启并使用CSSModules功能，包括小程序端和H5端的配置方法，以及推荐的自定义转换模式，帮助开发者更好地实现组件样式的模块化管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Taro 中内置了 CSS Modules 的支持，但默认是关闭的，如果需要开启使用，请先在编译配置中添加如下配置。

小程序端开启

weapp: {
  module: {
    postcss: {
      // css modules 功能开关与相关配置
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module，下文详细说明
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

H5 端开启

h5: {
  module: {
    postcss: {
      // css modules 功能开关与相关配置
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module，下文详细说明
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

在开启之后，你就可以在 Taro 中使用 CSS Modules 功能了，值得注意的是，Taro 中使用 CSS Modules 有两种模式，分别为全局转换及部分自定义转换模式，通过 namingPattern 配置进行控制

namingPattern 配置取值分别如下： - global，表示全局转换，所有样式文件都会经过 CSS Modules 转换处理，除了文件名中包含 .global. 的样式文件 - module，表示自定义转换，只有文件名中包含 .module. 的样式文件会经过 CSS Modules 转换处理

推荐使用自定义转换模式，这样的话就不会影响到一些第三方库的样式了

CSS Modules 使用方式如下

组件样式

.test {
  color: red;
  .txt {
    font-size: 36px;
  }
}

组件 JS 中使用样式

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

import styles from './Test.module.scss'

export default class Test extends Component {
  constructor(props) {
    super(props)
    this.state = { }
  }

  render () {
    return (
      <View className={styles.test}>
        <Text className={styles.txt}>Hello world!</Text>
      </View>
    )
  }
}