用法

Taro 中內(nèi)置了 CSS Modules 的支持，但默認(rèn)是關(guān)閉的，如果需要開啟使用，請(qǐng)先在編譯配置中添加如下配置。

小程序端開啟

weapp: {
  module: {
    postcss: {
      // css modules 功能開關(guān)與相關(guān)配置
      cssModules: {
        enable: true, // 默認(rèn)為 false，如需使用 css modules 功能，則設(shè)為 true
        config: {
          namingPattern: 'module', // 轉(zhuǎn)換模式，取值為 global/module，下文詳細(xì)說明
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

H5 端開啟

h5: {
  module: {
    postcss: {
      // css modules 功能開關(guān)與相關(guān)配置
      cssModules: {
        enable: true, // 默認(rèn)為 false，如需使用 css modules 功能，則設(shè)為 true
        config: {
          namingPattern: 'module', // 轉(zhuǎn)換模式，取值為 global/module，下文詳細(xì)說明
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

設(shè)置轉(zhuǎn)換模式

推薦使用自定義轉(zhuǎn)換模式，這樣的話就不會(huì)影響到一些第三方庫(kù)的樣式了

在開啟之后，你就可以在 Taro 中使用 CSS Modules 功能了，值得注意的是，Taro 中使用 CSS Modules 有兩種模式，分別為全局轉(zhuǎn)換及部分自定義轉(zhuǎn)換模式，通過 namingPattern 配置進(jìn)行控制

namingPattern 配置取值分別如下：

• global，表示全局轉(zhuǎn)換，所有樣式文件都會(huì)經(jīng)過 CSS Modules 轉(zhuǎn)換處理，除了文件名中包含 .global. 的樣式文件
• module，表示自定義轉(zhuǎn)換，只有文件名中包含 .module. 的樣式文件會(huì)經(jīng)過 CSS Modules 轉(zhuǎn)換處理

generateScopedName 支持傳入字符串和函數(shù)：

• 字符串，其格式見：https://github.com/webpack/loader-utils#interpolatename，值得指出的是，可使用 [local] 取其原類名
• 函數(shù)，其類型定義為 (localName: string, absoluteFilePath: string) => string，其中 localName 為原類名，absoluteFilePath 為文件的絕對(duì)路徑，返回值將作為新的類名

用法示例

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>
    )
  }
}