taro 框架中做 css Modules

前言

日常积累，欢迎指正

taro 框架中做 css Modules

taro 配置已内置了模块化，默认关闭通过配置开启即可。so easy

官网参考

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

namingPattern 说明

namingPattern 配置 CSS Modules 的两种模式：

• 全局转换
• 部分自定义转换模式
  namingPattern: ‘global’ 表示全局转换，默认所有样式文件都会经过 CSS Modules 转换处理，如果不想被 css module 转换的文件在文件名称中包含global 关键字即可。 如命名为 style.global.css/less/scss 即可。

namingPattern: ‘module’ 表示自定义转换，默认不对样式文件做 css module 处理，如果被处理文件名中包含 module 关键字即可。如命名为 style.module.css/less/scss

使用

未亲测，网上很多相关文章百度即可