Vue多布局场景下按需引入对应SCSS避免样式冲突问题咨询

你遇到的样式混杂问题有两个核心原因：

1. App.vue中同步引入了所有布局组件，构建工具会把所有组件内的<style>代码统一打包进全局样式，不管对应布局是否渲染，样式都会全局生效。
2. 布局组件的<style>没有做作用域隔离，不同布局的同名样式规则会互相覆盖。

方案1：布局组件动态懒加载+样式隔离（推荐） #

修改App.vue逻辑，不要提前同步导入所有布局，只有路由匹配到对应布局时才动态加载对应组件，未使用的布局组件和对应样式不会被加载：

<template>
    <component :is="layoutComponent" />
</template>

<script>
export default {
    data() {
        return {
            layoutComponent: null
        }
    },
    watch: {
        $route: {
            immediate: true,
            handler(to) {
                document.title = to.meta.title;
                const layoutName = to.meta.layout || 'DefaultLayout';
                // 动态导入对应布局，仅触发时加载
                import(`@/layouts/${layoutName.replace('Layout','').toLowerCase()}/${layoutName}.vue`)
                  .then(mod => {
                    this.layoutComponent = mod.default
                })
            }
        }
    }
};
</script>

同时给每个布局组件加专属命名空间避免样式冲突，即使出现异常加载也不会互相干扰：
以PrimaryLayout.vue为例：

<template>
  <!-- 最外层加专属类名 -->
  <div class="primary-layout">
     Html content here
     <router-view />
  </div>
</template>

<script>
export default {
    name: 'PrimaryLayout'
}
</script>

<style lang="scss">
// 所有样式套在专属类名下
.primary-layout {
  @import '@/assets/layouts/primary/scss/main.scss';
}
</style>

SecondaryLayout同理，外层加secondary-layout类，所有导入的SCSS都包裹在该类名下即可。

方案2：保留现有引入逻辑，仅做样式隔离 #

如果不想调整组件引入逻辑，只需要给所有布局的样式都加上专属命名空间即可，不同布局的样式规则会带上父类前缀，不会互相覆盖，不会出现样式混杂问题。

注意事项 #

• 不要在项目入口main.js、全局样式配置中导入各布局专属的SCSS文件
• 检查构建工具配置（vite.config.js/vue.config.js），没有配置自动全局导入所有布局SCSS的规则
• 公共样式单独抽离到全局公共样式文件中，不要写入布局专属SCSS

内容的提问来源于stack exchange，提问作者andrethedev