当前位置：首页 > article >正文

Taro + Vue 的 CSS Module 解决方案

article 2025/1/22 9:21:14

一、开启模块化配置

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]'
        }
      }
    }
  }
}

二、用法

（一）用法一

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

在 style 标签中使用 module 属性，并设置标识值。
在 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/

准备外部文件：test.module.scss。
```
.test {
  color: red;
}
```

导入并使用：

<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>