Question

问题：卸载组件时，组件样式保持不变。

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

背景：我正在尝试为SPA（带有vue-router）改编现有的vue代码库。更改了的组件时，会发生此问题，但是先前组件的样式会影响新组件。我想解决此问题而不改变样式（例如创建包装器）。

目前，我仅看到一种可行的方法：更改样式。但是我想要类似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'}
  ]
}

docs：https://github.com/webpack-contrib/style-loader#lazysingletonstyletag

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

Answer 2

最后，我开始对特定文件使用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();即可。

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

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

2 个答案: