如何删除未安装组件的组件样式？

Question

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

在这个例子中，我卸载（并销毁）Unused组件，但是来自这个组件的样式仍然影响页面。

背景：我正在尝试为 SPA（使用 vue-router）调整现有的 vue 代码库。当组件 for 更改时会发生此问题，但先前组件的样式会影响新组件。我想在不改变样式的情况下解决它（例如创建包装器）。

目前我只看到一种可能的方式：改变风格。但我想有一些像这样（我没有测试它尚未）。组件挂载时添加样式，卸载时删除样式。

Answer 1

更新了样式加载器版本 v1.0.0 的答案

他们添加了特殊选项injectType：

注入类型

类型：字符串 默认值：styleTag

允许设置如何将样式注入到 DOM 中。

可能的值：

style标签singletonStyle标签lazyStyle标签lazySingletonStyle标签link标签

v1.0.0 发布前的原始答案

最后我开始使用style-loader/useable而不是vue-style-loader特定文件。我为加载程序添加了额外的一条规则（“可用样式”）scss。这是我的 webpack 配置的一部分：

export default {
  module: {
    scss: {
      test: /\.scss$/,
      oneOf: {
        'useable-styles': {
          test: /AppHomepage\.scss$/,// pattern for useable styles
          use: {
            'style-loader': {
              loader: 'style-loader/useable',
              options: {
                sourceMap: false,
              },
            },
            'css-loader': { /*...*/ },
            'resolve-url-loader': { /*...*/},
            'sass-loader': { /*...*/},
          },
        },
        'vue-modules': { /*...*/},
        vue: { /*...*/},
        normal: { /*...*/},
      },
    },
  },
};

然后我在 JS 中加载样式，如下所示：

import styles from './AppHomepage.scss';

// @vue/component
export default {
  name: 'app-homepage',
  beforeCreate() {
    styles.use();
  },
  destroyed() {
    styles.unuse();
  },
};

并在需要时致电styles.use();或 ，styles.unuse();并且有效。

这不是理想的解决方案，但它可以作为临时解决方案并等待重构。