Taro 使用 CSS Modules

2021-09-30 17:52 更新

    用法

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

    小程序端开启

    1. weapp: {
    2. module: {
    3. postcss: {
    4. // css modules 功能开关与相关配置
    5. cssModules: {
    6. enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true
    7. config: {
    8. namingPattern: 'module', // 转换模式,取值为 global/module,下文详细说明
    9. generateScopedName: '[name]__[local]___[hash:base64:5]'
    10. }
    11. }
    12. }
    13. }
    14. }

    H5 端开启

    1. h5: {
    2. module: {
    3. postcss: {
    4. // css modules 功能开关与相关配置
    5. cssModules: {
    6. enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true
    7. config: {
    8. namingPattern: 'module', // 转换模式,取值为 global/module,下文详细说明
    9. generateScopedName: '[name]__[local]___[hash:base64:5]'
    10. }
    11. }
    12. }
    13. }
    14. }

    设置转换模式

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

    在开启之后,你就可以在 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 使用方式如下

    组件样式

    1. .test {
    2. color: red;
    3. .txt {
    4. font-size: 36px;
    5. }
    6. }

    组件 JS 中使用样式

    1. import Taro, { Component } from '@tarojs/taro'
    2. import { View, Text } from '@tarojs/components'
    3. import styles from './Test.module.scss'
    4. export default class Test extends Component {
    5. constructor(props) {
    6. super(props)
    7. this.state = { }
    8. }
    9. render () {
    10. return (
    11. <View className={styles.test}>
    12. <Text className={styles.txt}>Hello world!</Text>
    13. </View>
    14. )
    15. }
    16. }


    以上内容是否对您有帮助:
    在线笔记
    App下载
    App下载

    扫描二维码

    下载编程狮App

    公众号
    微信公众号

    编程狮公众号