Vue3新特性之在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'
 ]
}

然后在组件中的

在组件中访问 CSS Modules

在

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

Vue 3.x 中的 useCSSModule

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

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

export const useCSSModule = (name = '$style'): Record => {
 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
}

自定义 CSS Modules 注入名称

通过观察 useCSSModule 的源码发现，CSS Modules 的 name 好像可以不只是 $style；确实，在 .vue 文件中可以定义不止一个

到此这篇关于Vue3新特性之在Composition API中使用CSS Modules的文章就介绍到这了,更多相关Vue3新特性之在Composition API中使用CSS Modules内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！