如何在组件生命周期结束时移除导入的CSS？

首先直接给结论：直接通过beforeDestroy移除<style scoped>里@import的样式是不可行的，但可以通过替代方案实现类似需求，下面详细解释：

为什么直接移除不可行？ #

Vue的scoped样式是通过给组件DOM元素添加唯一的data-v-xxx属性，然后自动给样式选择器添加该属性前缀来实现作用域隔离的。当你在scoped样式里使用@import时，这个导入的CSS内容会在编译阶段被合并到当前组件的样式中，最终和组件自身的样式一起被打包或插入到页面的<style>标签里——这些导入的样式已经带上了data-v-xxx前缀，和组件原生样式融为一体，无法单独识别和移除。

而且@import是CSS解析阶段的指令，不是DOM层面的可操作元素，所以你没法在组件生命周期钩子中直接定位到这个导入的引用进行移除。

可行的替代方案 #

如果你必须在组件销毁时移除外部样式，推荐采用动态创建样式链接的方式，替代scoped里的@import：

1. 动态引入外部CSS并手动控制移除 #

在组件的mounted钩子中创建<link>标签引入外部样式，给标签加个唯一标识，然后在beforeDestroy中找到并移除它。同时为了模拟scoped的作用域效果，给组件根元素加专属类名，让外部CSS的样式都基于这个类名编写。

示例代码：

<template>
  <div class="my-custom-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      styleLink: null
    }
  },
  mounted() {
    // 创建并插入样式链接
    this.styleLink = document.createElement('link')
    this.styleLink.rel = 'stylesheet'
    this.styleLink.href = 'https://test.com/path/to/my-stylesheets/styles.css'
    // 添加自定义属性用于标识，方便后续查找
    this.styleLink.dataset.component = 'MyCustomComponent'
    document.head.appendChild(this.styleLink)
  },
  beforeDestroy() {
    // 移除样式链接
    if (this.styleLink && this.styleLink.parentNode) {
      this.styleLink.parentNode.removeChild(this.styleLink)
      this.styleLink = null
    }
  }
}
</script>

<style scoped>
/* 组件自身的scoped样式 */
.my-custom-component {
  /* 基础样式 */
}
</style>

对应的外部CSS文件styles.css里的样式都要基于.my-custom-component前缀编写：

.my-custom-component .button {
  /* 按钮样式 */
}
.my-custom-component .card {
  /* 卡片样式 */
}

2. 额外说明：如果不需要物理移除 #

如果你的需求只是避免样式污染其他组件，其实不用刻意移除scoped里@import的样式——因为这些样式已经带上了组件专属的data-v-xxx前缀，组件销毁后，页面中没有对应的DOM元素拥有该属性，这些样式不会对其他元素产生影响。只有当你有严格的性能要求（比如页面中样式过多），才需要用动态链接的方式物理移除。

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