一、开启模块化配置

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

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

二、用法

（一）用法一

1. Style 标签使用 module 属性，View 节点使用 class 属性，对应的值为 $style.类名。

   <template><p :class="$style.red">This should be red</p>
   </template><style module lang="scss">
   .red {color: red;
   }
   </style>
   

   效果：
   

（二）用法二

可以使用 useCssModule() API 来实现 CSS Modules 功能。以下是具体用法：
参考链接：https://vuejs.org/api/sfc-css-features.html#css-modules

1. 在 style 标签中使用 module 属性，并设置标识值。
2. 在 View 节点上使用 class 属性，将其值设为 useCssModule 定义的标识符加类名。

   <template><p :class="redStyle.color">This should be red</p></template><script setup>import { useCssModule } from 'vue'const redStyle = useCssModule()</script><style module lang="scss">.color {color: red;}</style>

或者，可以使用命名方式为 style 标签的 module 属性赋值，实现同样的效果：

   <template><p :class="redStyle.color">This should be red</p></template><script setup>import { useCssModule } from 'vue'const redStyle = useCssModule('myName')</script><style module="myName" lang="scss">.color {color: red;}</style>

效果:

（三）用法三

导入外部 scss module 文件。
参考：https://docs.taro.zone/docs/css-modules/

1. 准备外部文件：test.module.scss。

   .test {color: red;
   }
   

2. 导入并使用：

   <template><view :class="styles.test" class="test">Hello World!</view>
   </template><script setup>
   import styles from './test.module.scss'
   </script>
   

   效果：
   
   注意：如果在内部 Style 标签使用了同样的类名，那么会覆盖外部导入：

   <template><view :class="styles.test" class="test">Hello World!</view>
   </template><script setup>
   import styles from './test.module.scss'
   </script><style>
   .test {/* 优先级高 */color: blue;
   }
   </style>
   

   效果：