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>

    效果:

相关推荐
石金龙8 小时前
[译] Composition in CSS
前端·css
天天扭码9 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153179 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
用户516816614584110 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦10 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He10 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ15 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊15 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码16 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
会豪17 小时前
CSS 动画属性精讲:从基础到实战
前端·css