vue中父组件与其slot作用域中组件scss的加载顺序。

[Tzdy]

场景：需要引入一个类似bootstrap的scss库，但是不希望污染全局。

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script lang="ts">
export default defineComponent({

})
</script>

<style lang="scss" scoped>
:deep() {
    & {
        // Global requirements
        @import "@primer/css/support/index.scss";
        @import '@primer/css/core/index.scss';
        @import '@primer/css/subhead/index.scss';
        @import '@primer/css/alerts/index.scss';
        @import '@primer/css/avatars/index.scss';
        @import '@primer/css/dropdown/index.scss';
        @import '@primer/css/header/index.scss';
        @import '@primer/css/labels/index.scss';
        @import '@primer/css/loaders/index.scss';
        @import '@primer/css/popover/index.scss';
        @import '@primer/css/timeline/index.scss';
        @import '@primer/css/toasts/index.scss';
        @import '@primer/css/toggle-switch/index.scss';
        @import '@primer/css/select-menu/index.scss';
        @import '@primer/css/marketing/index.scss';
        @import '@primer/css/breadcrumb/index.scss';
        @import '@primer/css/progress/index.scss';
        @import '@primer/css/markdown/index.scss';
    }
}
</style>

然后所有需要使用scss的组件放在Container组件的slot中。

<template>
  <Container>
    <div class="mx-2 px-2"></div>
  </Container>
</template>

但是这样会有一个问题。

css的加载顺序为 先slot中组件的css 再 Container中的css。这就导致了，相同css权重的情况下，slot中组件的css会被Container中的覆盖。

所以如果想在slot中组件自定义css，就要注意加!important

[Tzdy]

在nuxt3中，开发模式和生产模式会有差异。

• 开发模式会闪烁一下，最终以自定义为主
• 生产模式就直接覆盖自定义。

可以在slot中的组件中

<style lang="scss">
.overwrite {
    & {
       .......编写css，优先级就一定高于Container中的css
    }
}
</style>