Vue基础组件库引入样式失效
# 场景
项目是基于 nuxt3 的。
在使用基础组件库的carousel组件时发现浏览器调试里面没有组件的css样式，经过检查发现组件库中已经包含该样式，且在App.vue中引入了。
/* App.vue */
<style lang="less">
@import url('xxx/xxx.less')
</style>
1
2
3
4
5
2
3
4
5
在App.vue中导入样式是有一部分样式生效的，但是另一部分由于深度样式穿透失败，就没法生效。
# 问题原因
在根组件 App.vue 中引入全局 less 文件，最后编译后的结果是：
<html>
<head>
<style type="text/css" data-vite-dev-id="D://project/src/app.vue/?vue&type=style&index=0&lang.less">
</style>
</head>
</html>
1
2
3
4
5
6
2
3
4
5
6
打开这个 style 请求的结果：
:deep(.goal-carousel-slide) {
"display": flex;
"justify-content": center;
"align-items": center;
"margin-bottom": var(--carousel-slider-top-space);
"margin-right": var(--carousel-slider-space);
"width": var(--carousel-slider-width);
"height": var(--carousel-slider-height);
"flex-shrink": 0;
"cursor": var(--carousel-slider-cursor);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
可以发现这个:deep穿透没有被编译，浏览器无法识别，于是这块样式就失效。
# 解决方案
在nuxt配置文件nuxt.config.ts中配置全局样式：
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
less: {
additionalData: `@import url('xxx/xxx.less');`
}
}
}
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
注意
additionalData: @import url('xxx/xxx.less');中的分号 由于是less文件，所以不要写到nuxt.config.ts的css配置项中
在 nuxt 配置中全局导入后，最后编译的结果是：
<html>
<head>
<link rel="modulepreload" as="script" crossorigin href="xxxx/_nuxt/xxx.bf5eb6ad.js">
</head>
</html>
1
2
3
4
5
2
3
4
5
打开这个 style 请求的结果：
[data-v-928a8184] .goal-carousel-slide {
align-items: center;
cursor: var(--carousel-slider-cursor);
display: flex;
flex-shrink: 0;
height: var(--carousel-slider-height);
justify-content: center;
margin-bottom: var(--carousel-slider-top-space);
margin-right: var(--carousel-slider-space);
width: var(--carousel-slider-width)
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
这就将 less 编译成了 css 了，浏览器就能识别，于是样式生效。
上次更新: 2023/12/16, 09:22:46