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

Question

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

在这个 example 中，我卸载（并销毁）Unused 组件，但该组件的样式仍然影响页面。

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

目前我只看到一种可能的方法：改变样式。但是我想要 this 之类的东西（我还没有测试过）。组件安装时添加样式，卸载时删除样式。

Answer 1

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

他们添加了特殊选项 injectType:

injectType

Type: String Default: styleTag

Allows to setup how styles will be injected into the DOM.

Possible values:

styleTag singletonStyleTag lazyStyleTag lazySingletonStyleTag linkTag

v1.0.0 发布前的原始答案

最后我开始对特定文件使用 style-loader/useable 而不是 vue-style-loader。我为 scss 加载程序添加了额外的一条规则 ('useable-styles')。这是我的 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();。

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

Answer 2

已接受的答案现已过时。使用新的样式加载器 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() 保持不变。

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

How to remove component styles for unmouned components?

vue.js

vue-router

vue-loader

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

v1.0.0 发布前的原始答案