title: 使用 CSS Modules

用法

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

在小程序端开启

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

  2. ### 在 H5 端开启
  4. ```js title="config/index.js"
  5. h5: {
  6.   module: {
  7.     postcss: {
  8.       // css modules 功能开关与相关配置
  9.       cssModules: {
  10.         enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
  11.         config: {
  12.           namingPattern: 'module', // 转换模式，取值为 global/module，下文详细说明
  13.           generateScopedName: '[name]__[local]___[hash:base64:5]'
  14.         }
  15.       }
  16.     }
  17.   }
  18. }

设置转换模式

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

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

namingPattern 配置取值分别如下：

  • global，表示全局转换，所有样式文件都会经过 CSS Modules 转换处理，除了文件名中包含 .global. 的样式文件
  • module，表示自定义转换，只有文件名中包含 .module. 的样式文件会经过 CSS Modules 转换处理

generateScopedName 支持传入字符串和函数：

  • 字符串，其格式见：https://github.com/webpack/loader-utils#interpolatename，值得指出的是，可使用 [local] 取其原类名
  • 函数，其类型定义为 (localName: string, absoluteFilePath: string) => string，其中 localName 为原类名，absoluteFilePath 为文件的绝对路径，返回值将作为新的类名

用法示例

CSS Modules 使用方式如下：

```scss title=”组件样式” .test { color: red; .txt { font-size: 36px; } }

  2. ```jsx title="组件 JS 中使用样式"
  3. import React, { Component } from 'react'
  4. import { View, Text } from '@tarojs/components'
  6. import styles from './Test.module.scss'
  8. export default class Test extends Component {
  9.   render () {
  10.     return (
  11.       <View className={styles.test}>
  12.         <Text className={styles.txt}>Hello world!</Text>
  13.       </View>
  14.     )
  15.   }
  16. }

相关阅读

开源插件 weapp-css-modules - 极致追求，让小程序代码包立减 10% 的插件