Vue中style设置scoped后引入的CSS仍影响其他组件如何解决

Vue的<style scoped>中使用原生@import导入的CSS文件，不会被scoped编译规则处理，导入的样式会直接作为全局样式注入到页面中，因此会影响其他组件的样式。

方案1：使用<style src>引入（无额外依赖，兼容性最佳） #

Vue原生支持单个组件内声明多个<style>标签，你可以将每个外部CSS文件通过单独的带scoped属性的style标签引入，导入的样式会自动被scoped规则处理，仅作用于当前组件：

<!-- 存放组件自定义样式的scoped style -->
<style scoped>
/* 你的自定义组件样式写在这里 */
</style>

<!-- 逐个引入外部CSS文件，每个标签都添加scoped属性 -->
<style scoped src="/public/admin/bs3/css/bootstrap.min.css"></style>
<style scoped src="/public/admin/css/bootstrap-reset.css"></style>
<style scoped src="/public/admin/font-awesome/css/font-awesome.css"></style>
<style scoped src="/public/admin/css/style.css"></style>
<style scoped src="/public/admin/css/style-responsive.css"></style>

该方案Vue2、Vue3均原生支持，无需额外配置，不会出现运行时报错。

方案2：配合CSS预处理器实现隔离（适配已使用SCSS/LESS的项目） #

如果你的项目已经接入了SCSS/LESS等预处理器，可以将所有外部CSS导入语句放在当前组件的根选择器内部，配合预处理器的导入规则实现作用域隔离：

<style scoped lang="scss">
/* 假设当前组件的根元素类名为admin-container */
.admin-container {
  @import '/public/admin/bs3/css/bootstrap.min.css';
  @import '/public/admin/css/bootstrap-reset.css';
  @import '/public/admin/font-awesome/css/font-awesome.css';
  @import '/public/admin/css/style.css';
  @import '/public/admin/css/style-responsive.css';
}

/* 其他自定义样式 */
</style>

编译后所有外部样式都会被加上根选择器前缀，再配合scoped自带的组件唯一属性选择器，完全不会泄露到全局影响其他组件。

如果之前测试其他方案出现运行时报错，大多为两类原因：

• 项目编译工具未配置对应的CSS处理loader，导致外部CSS文件无法被正确解析
• 混用了原生CSS和预处理器的导入语法，导致编译不通过

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