How to remove component styles for unmouned components?

Question

The problem: component styles keeped when component was unmounted.

In this example, I unmount(and destroy) Unused component, but styles from this component still affect on page.

Background: I'm trying to adapt existed vue codebase for SPA(with vue-router). This problem happens when component for was changed, but styles from previous component affect on new. I want to solve it without changes in styles(e.g. creating wrappers).

At the current moment I see only one posible way: change styles. But I want to have something like this (I have not tested it yet). When component mounted it add styles, when unmounted it remove styles.

Answer 1

The accepted answer is now out of date. to use the new style-loader API, something like this via 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

the style.use(); / style.unuse() remains the same.