专栏首页云前端Vue 3 新特性:在 Composition API 中使用 CSS Modules

Vue 3 新特性:在 Composition API 中使用 CSS Modules

在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 @vue/composition-api 库中,都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中,支持 CSS Modules 语法。

首先来看看什么是 CSS Modules:

CSS Modules

CSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules,可以作为模拟 scoped CSS 的替代方案。

启用 CSS Modules

如果是使用 vue cli 创建的项目,应该已经默认开启了这一特性;如果项目中需要手动开启,按如下设置:

// webpack.config.js
{
  module: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

或者与其它预处理器一起使用:

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { modules: true }
    },
    'sass-loader'
  ]
}

然后在组件中的 <style> 上添加 module 特性:

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

在组件中访问 CSS Modules

<style> 上添加 module 后,一个叫做 $style 的计算属性就会被自动注入组件。

<template>
  <div>
    <p :class="$style.red">
      hello red!
    </p>
  </div>
</template>

因为这是一个计算属性,所以也支持 :class 的对象/数组语法:

<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>
  </div>
</template>

也可以通过 JavaScript 访问:

<script>
export default {
  created () {
    console.log(this.$style.red)
  }
}
</script>

Vue 2.x 传统用法

在 Options API 组件中:

<template>
  <span :class="$style.span1">hello 111 - {{ text }}</span>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  }
};
</script>

<style lang="scss" module>
.span1 {
  color: red;
  font-size: 50px;
}
</style>

对于 JSX 组件,由于其没办法用 scoped style,所以 CSS Modules 是个很好的选择:

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  render(h) {
    return <span class={this.$style.span1}>hello 222 - {this.text}</span>;
  }
};
</script>

<style lang="scss" module>
.span1 {
  color: blue;
  font-size: 40px;
}
</style>

Vue 3.x 中的 useCSSModule

引入 useCSSModule 函数后,在 Composition API 组件中使用 CSS Modules 就有了标准方案:

<template>
  <span :class="$style.span1">hello 333 - {{ text }}</span>
</template>

<script>
import { useCSSModule } from '@vue/composition-api';

export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  setup(props, context) {
    const $style = useCSSModule();
    return {
      $style
    };
  }
};
</script>

<style lang="scss" module>
.span1 {
  color: green;
  font-size: 30px;
}
</style>

其源码实现也是非常之简单,基本就是取出 this.$style 而已:

export const useCSSModule = (name = '$style'): Record<string, string> => {
  const instance = getCurrentInstance()
  if (!instance) {
    __DEV__ && warn(`useCSSModule must be called inside setup()`)
    return EMPTY_OBJ
  }

  const mod = (instance as any)[name]
  if (!mod) {
    __DEV__ &&
      warn(`Current instance does not have CSS module named "${name}".`)
    return EMPTY_OBJ
  }

  return mod as Record<string, string>
}

自定义 CSS Modules 注入名称

通过观察 useCSSModule 的源码发现,CSS Modules 的 name 好像可以不只是 $style;确实,在 .vue 文件中可以定义不止一个 <style module>,这可以通过设置 module 特性的值实现:

<style module="a">
  /* 注入标识符 a */
</style>

<style module="b">
  /* 注入标识符 b */
</style>

--End--

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 抽丝剥茧 - 实例简析重构代码的三板斧

    可以说,任何软件系统从设计部署好的第二天起,就都变成了既有代码(existing code)。一个几年的系统和一个几周的系统中存在的问题,并无本质上的差异。

    江米小枣
  • 清理组件的 3 种方法

    编写可维护的代码并不容易。这件事学起来难,教别人如何做更难。大多数时候,这是个熟能生巧的事情。但是历年来,我学习到的能让你快速掌握的参考资料还是比较少。

    江米小枣
  • [译] 面向 React 和 Nginx 的 Docker 多阶段构建

    原文:http://progressivecoder.com/docker-multi-stage-build-for-running-react-applic...

    江米小枣
  • user-modify跟style标签可真是天生一对?

    前来挖墙脚的是html中的contenteditable,他是一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea,不过还是存在...

    聪明的汤姆
  • CentOS 6.X 安装中文字体

    由于业务需要,需要对CentOS6.9添加中文字体支持 安装工具包 yum install -y fontconfig mkfontscale 安装完成后...

    shaonbean
  • SAP UI5 Web Component里如何自定义CSS style

    在public文件夹的index.html里的head标签页里,添加一个style设置:

    Jerry Wang
  • 网页的修饰

    总第61篇 上一篇推送了网页的基本构成,链接地址:网页是怎么构成的?,这篇来讲讲网页的修饰,正如字面意思一般,本篇分享的内容是用来修饰网页的,是让网页变得更加好...

    张俊红
  • LaTeX 折腾系列 | Linux 字体安装记录

    在使用 LaTeX 进行中文字体编译排版过程中,发现 CentOS 6.5 中缺乏很大一部分中文字体,以至于在编译过程中频繁抛出缺乏字体的错误。 现在基于 wi...

    Steven Shen
  • SAS-输出文档生成目录的方法

    前段时间有一个需求,利用SAS实现文档目录的自动生成。这里小编没有限定文档的类型,是因为本文将分享两种类型文档(PDF/RTF)通过SAS自动生成目录的方法。

    Setup
  • JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用...

    郑小超.

扫码关注云+社区

领取腾讯云代金券