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>

    效果:

相关推荐
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding8 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜8 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD8 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding8 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空8 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子8168 小时前
scroll-marker轮播组件不再难
前端·css
01传说9 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
凌辰揽月11 小时前
7月10号总结 (1)
前端·css·css3
天天扭码11 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试