好资源导航 » 文章资讯 » Vue3新特性之在Composition API中使用CSS Modules

Vue3新特性之在Composition API中使用CSS Modules

2023-07-21 17:06:06 84

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

首先来看看什么是CSSModules：

CSSModules

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

启用CSSModules

如果是使用vuecli创建的项目，应该已经默认开启了这一特性；如果项目中需要手动开启，按如下设置：

//webpack.config.js
{
module:{
rules:[
//...其它规则省略
{
test:/\.css$/,
use:[
'vue-style-loader',
{
loader:'css-loader',
options:{
//开启CSSModules
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'
]
}

然后在组件中的

在组件中访问CSSModules

在

对于JSX组件，由于其没办法用scopedstyle，所以CSSModules是个很好的选择:




.span1{
color:blue;
font-size:40px;
}

Vue3.x中的useCSSModule

引入useCSSModule函数后，在CompositionAPI组件中使用CSSModules就有了标准方案：






.span1{
color:green;
font-size:30px;
}

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

exportconstuseCSSModule=(name='$style'):Record=>{
constinstance=getCurrentInstance()
if(!instance){
__DEV__&&warn(`useCSSModulemustbecalledinsidesetup()`)
returnEMPTY_OBJ
}

constmod=(instanceasany)[name]
if(!mod){
__DEV__&&
warn(`CurrentinstancedoesnothaveCSSmodulenamed"${name}".`)
returnEMPTY_OBJ
}

returnmodasRecord
}

自定义CSSModules注入名称

通过观察useCSSModule的源码发现，CSSModules的name好像可以不只是$style；确实，在.vue文件中可以定义不止一个，这可以通过设置module特性的值实现：


/*注入标识符a*/



/*注入标识符b*/

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

返回顶部
514930285
czq8825@qq.com

Vue3新特性之在Composition API中使用CSS Modules

热门推荐

随机推荐