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>

    效果:

相关推荐
羊羊小栈1 小时前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
晚星star1 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js
本末倒置1831 小时前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
不一样的少年_3 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
前端Hardy3 小时前
12个被低估的 CSS 特性,让前端开发效率翻倍!
前端·javascript·css
前端Hardy3 小时前
HTML&CSS:精美的3D折叠卡片悬停效果
前端·javascript·css
Zz_waiting.4 小时前
案例开发 - 日程管理 - 第六期
前端·javascript·vue.js·路由·router
A 风4 小时前
封装日期选择器组件,带有上周,下周按钮
开发语言·javascript·vue.js
Simon_He5 小时前
vue-markdown-renderer:比 vercel streamdown 更低 CPU、更多节点支持、真正的流式渲染体验
前端·vue.js·markdown
光影少年6 小时前
css优化都有哪些优化方案
前端·css·rust