Taro + Vue 的 CSS Module 解决方案

一、开启模块化配置

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

weapp: {
  module: {
    postcss: {
      // css modules 功能开关与相关配置
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          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>
   

   效果：