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=