Allenice

Appearance

场景 ​

项目是基于 nuxt3 的。

在使用基础组件库的carousel组件时发现浏览器调试里面没有组件的css样式，经过检查发现组件库中已经包含该样式，且在App.vue中引入了。

css
/* App.vue */

<style lang="less">
@import url('xxx/xxx.less')
</style>
/* App.vue */

<style lang="less">
@import url('xxx/xxx.less')
</style>

在App.vue中导入样式是有一部分样式生效的，但是另一部分由于深度样式穿透失败，就没法生效。

问题原因 ​

在根组件 App.vue 中引入全局 less 文件，最后编译后的结果是：

HTML
<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>
<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>

打开这个 style 请求的结果：

CSS
: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);
}
: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);
}

可以发现这个:deep穿透没有被编译，浏览器无法识别，于是这块样式就失效。

解决方案 ​

在nuxt配置文件nuxt.config.ts中配置全局样式：

typescript
export default defineNuxtConfig({
    vite: {
        css: {
            preprocessorOptions: {
                less: {
                    additionalData: `@import url('xxx/xxx.less');`,
                },
            },
        },
    },
});
export default defineNuxtConfig({
    vite: {
        css: {
            preprocessorOptions: {
                less: {
                    additionalData: `@import url('xxx/xxx.less');`,
                },
            },
        },
    },
});

注意additionalData: @import url('xxx/xxx.less');中的分号 由于是less文件，所以不要写到nuxt.config.ts的css配置项中

在 nuxt 配置中全局导入后，最后编译的结果是：

HTML
<html>
    <head>
        <link rel="modulepreload" as="script" crossorigin href="xxxx/_nuxt/xxx.bf5eb6ad.js">
    </head>
</html>
<html>
    <head>
        <link rel="modulepreload" as="script" crossorigin href="xxxx/_nuxt/xxx.bf5eb6ad.js">
    </head>
</html>

打开这个 style 请求的结果：

CSS
[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)
}
[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)
}

这就将 less 编译成了 css 了，浏览器就能识别，于是样式生效。