Vue路由切换组件时scoped样式@import引发样式污染如何解决

<style scoped>中使用@import引入外部CSS时，不会触发Vue的作用域样式处理逻辑：

• Vue单文件组件的scoped隔离原理，是给组件内所有DOM元素注入唯一的data-v-xxxx自定义属性，同时给当前style块内编写的所有CSS选择器末尾追加对应属性选择器，把样式生效范围限制在当前组件内
• @import引入的外部CSS文件内容不会被上述scoped逻辑处理，会被直接注入全局样式表
• 基于@inertiajs/inertia-vue3的路由跳转是SPA无刷新模式，全局注入的样式不会随组件卸载自动移除，最终导致前序页面的样式残留污染后续页面。

优先选择第一种方案，改造成本最低，符合Vue官方设计规范。

方案1：替换@import为style标签的src属性引入外部CSS #

将外部CSS文件通过<style scoped>的src属性绑定引入，Vue会自动将外部文件的全部样式内容纳入scoped处理流程，所有选择器都会被追加组件唯一标识，样式也会随组件的挂载/卸载自动生效、销毁，不会残留全局。
修改两个组件的样式块写法：

• Main组件调整

<!-- 移除原有@import写法 -->
<!-- <style scoped>
@import '../resources/css/main.css';
</style> -->

<!-- 替换为以下写法 -->
<style scoped src="../resources/css/main.css"></style>

• Admin组件调整

<!-- 移除原有@import写法 -->
<!-- <style scoped>
@import 'resources/css/admin.css';
</style> -->

<!-- 替换为以下写法 -->
<style scoped src="../resources/css/admin.css"></style>

注意：路径书写统一使用正斜杠/，不要使用Windows风格的反斜杠\，避免跨环境构建时出现路径解析错误。

方案2：增加类名命名空间隔离 #

如果需要保留@import写法，可以给两个页面组件的根DOM元素设置独立的专属类名，再将对应CSS文件内的所有选择器嵌套在该类名作用域下，从选择器规则层面避免全局污染：

• Main组件根元素添加class="main-container"，main.css内所有样式统一嵌套在.main-container选择器下
• Admin组件根元素添加class="admin-container"，admin.css内所有样式统一嵌套在.admin-container选择器下

方案3：全局样式统一入口管理 #

如果两份CSS本身属于全局基础样式，不要放在组件scoped块内引入，统一在项目入口文件（如app.js）中全局引入即可。如果需要按页面加载不同全局样式，可以绑定Inertia的页面切换事件，动态增删对应的style标签，该方案维护成本较高，不作为首选。

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