如何仅为指定Vue组件加载专属CSS文件而不全局生效

问题原因 #

你当前使用的无scoped属性的<style>标签属于全局样式块，内部通过@import引入的CSS规则会直接挂载到应用全局，会影响整个应用的所有元素。

解决方案 #

方案1：scoped样式块配合src引入（适合本地CSS文件） #

Vue的<style>标签原生支持src属性引入外部样式文件，只要同时加上scoped属性，引入的本地样式会自动被Vue的样式隔离机制处理，所有规则都会自动加上当前组件的唯一属性选择器，仅作用于当前组件内部的元素：

<script>
export default {
  name: "FriendComponent",
  // ...其余业务逻辑
}
</script>

<style scoped src="./xxx/bootstrap.min.css">
/* 可在此补充组件自定义样式 */
</style>

注意：如果引入的是外部CDN的CSS文件，该方式可能不被构建工具支持，优先选择下面两种方案。

方案2：CSS预处理器嵌套限制作用域（兼容性最好） #

如果你的项目支持SCSS/LESS等预处理器，可以给组件根元素设置唯一类名，再把引入的CSS嵌套在该类名下，实现样式隔离：

1. 先给组件根元素添加唯一类名

<template>
  <div class="friend-component-wrapper">
    <!-- 组件内部所有内容 -->
  </div>
</template>

2. 样式块嵌套引入CSS

<style lang="scss">
.friend-component-wrapper {
  @import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css';
}
</style>

方案3：动态挂载/卸载样式（适合按需渲染的组件） #

如果你的组件是临时渲染的，希望组件销毁后样式也从全局移除，可以通过JS动态控制样式标签的加载：

<script>
export default {
  name: "FriendComponent",
  mounted() {
    // 动态创建link标签加载CSS
    const bootstrapLink = document.createElement('link')
    bootstrapLink.rel = 'stylesheet'
    bootstrapLink.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
    bootstrapLink.id = 'friend-component-bootstrap-css' // 加唯一标识方便后续删除
    document.head.appendChild(bootstrapLink)
  },
  beforeUnmount() {
    // 组件销毁时移除对应的样式
    const targetLink = document.getElementById('friend-component-bootstrap-css')
    if (targetLink) document.head.removeChild(targetLink)
  }
}
</script>

补充说明：如果使用scoped方案后，引入的样式需要作用到组件内部引入的子组件根元素，可使用Vue提供的深度选择器，Vue2用/deep/或::v-deep，Vue3用:deep()。

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