Taro + Vue 的 CSS Module 解决方案

一、开启模块化配置

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

typescript 复制代码
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.类名

    html 复制代码
    <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 定义的标识符加类名。
html 复制代码
   <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 属性赋值,实现同样的效果:

html 复制代码
   <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

    scss 复制代码
    .test {
      color: red;
    }
  2. 导入并使用:

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

    效果:

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

    html 复制代码
    <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>

    效果:

相关推荐
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef064 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端6 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆8 小时前
vue3.4中的v-model的用法~
前端·vue.js
小桥风满袖8 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Hilaku8 小时前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
阳火锅8 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水9 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了9 小时前
实现一个简单的Vue响应式
前端·vue.js
每天开心10 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程