vue.js - 如何删除未安装组件的组件样式？

Question

问题:卸载组件时保留组件样式。

在此example ，我卸载(并销毁)Unused 组件，但该组件的样式仍然影响页面。

背景:我正在尝试将现有的 vue 代码库改编为 SPA(使用 vue-router)。当组件发生更改，但先前组件的样式影响新组件时，就会出现此问题。 我想在不改变样式的情况下解决这个问题(例如创建包装器)。

目前我只看到一种可能的方法:改变风格。 但我想要类似 this 的东西(我还没有测试过)。 当组件安装时，它添加样式，当组件卸载时，它删除样式。

Answer 1

接受的答案现已过时。使用新的样式加载器 API，通过 injectType 类似:

{   
  test: /\.theme\.(sa|sc)ss$/,
  use: [
    {
      loader: 'style-loader',
      options: {attributes: {id: 'theme-sheet'}, injectType: 'lazySingletonStyleTag'}
    },
    {loader: 'css-loader'},
    {loader: 'sass-loader'}
  ]
}

文档:https://github.com/webpack-contrib/style-loader#lazysingletonstyletag

style.use();/style.unuse() 保持不变。