在 Vue 3 Composition API 最近的一次 beta 晋级中，无论是 Vue 3 本 3 库 vue-next，还是面向 Vue 2 过渡用的 @vue/composition-api 库中，都同步更新了一个 useCSSModule 函T s 2 y F K &数 — 用来在运用了 Composition API 的 Vue 实例中，支持 CSS Modules 语4 e 2 h u法。; d H H
首先来看看什么是 CSS Modules：
CSS Modules
CSS Modules 是一种 CS/ # p k [S 的模块化和组合系统。vue-loader 集成 CSS Modules，能够作为模拟 scoped CSS 的替代计划。
启用 CSS Modules
假b B b如是运用 vue cli 创建的项目，应该已经默q _ m e 4 ] K Z许敞开了这一特性；假如项目中需要手动敞开，按如下设置：
// webpack.config.js
{
module: {
rules: [
// ... 其它规则省略
{
test: /.css$/,
use: [
'vue-styZ Z P 0 b U t ale-loader',
{
loade: l R : # ; I r Hr: 'css-loader',
opti5 a 7 - n p dons: {
// 敞开 CSS Modules
modules: trn 9 X que,
// 自定义生成的类名
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}
或者与其它预处理器一起运用：
// webpack.config.js -> module.rules
{
tev E B _ : d f $ 3st: /.scss$/,
use: [
'vue-style-loader'G z ] D 2 U W d,
{
loader: 'css-loader',
o) z dptions: { modules: true }
},
'sass-loader'
]
}
然后在组件中的 <style> 上增加m f 4 X P 6 N module 特性：
<style module&w [ R ^ Bgt;
.red {
color: red;
}
.$ 8 H e jbold {
font-weig8 h R Rht: bold;
}
</styleV 3 M c : a />
在组件中= _ R : K * A T拜访 CSS Modules
在 <style> 上增加 module 后，一个叫做 $stylP l be 的核算特点就会被主动注入组件。
<N 3 G s F;template>
<div>
<` ( /p :class="$stylX s * ) 7 9 O + ne.red"&[ | E ! # Mgt;
hello reo p F Md!} % i
</p>
</div>
</template>
因为这是一个核算特5 X l r 点，所以也支持 :class 的对象/数组! R x语法：
<template>
<div>
<p :class="{ [$style.red]: isRed }">
Am I red?
<K = P ] r F Y/p>
<p :class="[$style.red, $style.boH ) l - [ld]">
Red and bold
</p>
&+ I %lt;/div>
</template>
也能够经过 JavaScript 拜访：
<script>
exporte ( J { { u M k default {
created () {
console.log(this.$style.red)
}
}
</script>
Vue 2.x 传统用法
在 Options API 组件中：
<template>
<span :class="$sK ? ( h 1 S _ Ntyle.span1"S [ # ! G>hello 111 - {{ text }}</span>
</template>
<script>
export default {
props: {
text: {
type: S3 / c J G o k ftring,
default: ''
}
}
};
</script>
<style lang="scss" module H {>
.span1 {
color: red;
font-size: 50px;
}
</style>
对于 JSX 组件，由于其没办法用 scU 1 F a voped style，所以 CSS Modm J l . V E c Y fules 是个很好的挑选:
<sE w t ! $ T A K 0cript>
export default {
p9 = V 4 Props: {
text: {s ( ? / Z v f : +
type: String,
default: ''
}
},
render(ha g 3) {
return &o o G ~ f ?lt;span class={this.$style.span1}>hello 222 - {this.text}</span>;
}
};
</scri_ / ) ( ( 5 kpt>
<style lang="scss" module>
.span1 {
color: blue;
font-size: 40px;
}
</style>
Vue 3.x 中] = L _的 useCSSModule
引入 useCSSMod{ s P z l !ule 函数后，在 Composition API 组件中m s V @ `运用 CSS Modules 就有了规范计划：
&l$ / ~ V ? qt;te3 K Wmplate>
<span :class="$style.span1">hello 333 - {{ tS p c % _ * Q ,ext }}</span>
</template>
<script>
import { useCSSModule } from '@vue/composition-api';
exC y &port de I G 6 q 7efault {
props: {
text1 a . / {: {
type: String,
default: ''
}
},
setup(props,M l k c 6 D 4 T / context) {
const $style = useCSSModule();
return {
$style
};
}
};k t U _ - 2 Q
</script>
<style lang="scss"H { ] + [ module>
.span1 {
color: green;
font-size: 30px;
}
</style>
其源码完成也是非常之简略，基本就是取出 this.$style6 : I y A 罢了：
export const useCSSModule = (name = '$style'): Record& V X P d M n<string, string&g% 4 d z i ` X kt; =>, ! ; c 1 3 {
const instance = getCurrent7 D `Instance()
if (!instance) {
__DEV__ && warn(`useCSSModule must be called inside setup()`)
return EMPTY_OBJ
}
const mod = (i: F J p $nstance as any)[name]
if (!mod) {
__DEV__ &&
warn(`Current instance does not have CSS module named "${name}".`)
return EMPTY_OBJ
}
return mod as Record<strine X E n x vg, sH $ Ytring>
}
自定义 CSS Modules 注入名称
经过调查 useCSSModule 的源码发现，CSS Modules 的 name 如同能够8 | o不只是 $style；确实，在 .vuz d u C . =e 文件中能够定义不止一C ; t R L Y L个 <style module>，这能够经过设置 module 特性的值完成：
<style module="a">
/* 注入标识符 a */
</style>
<style module="b">
/) I ! %* 注入标识符 b */
</style>
–End–
检查更多前端好文
请查找 fewelife 关注公众号
转载请注明出处
