作者：king_her灬o1 | 来源：互联网 | 2022-01-24 20:45
这篇文章主要介绍了Vue3新特性之在CompositionAPI中使用CSSModules,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在 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'
]
}
然后在组件中的
京公网安备 11010802041100号