How to remove/unimport inline CSS with Webpack?

Question

Ok, I have imported a css file with Webpack style-loader and css-loader like this:

import './style.css'

And Webpack append it to my page via style tag. So far, so good. But, when the state of application change, I want to remove this particular style. Of course, I could remove it with document.querySelector('style'), but is there some natural Webpack way of doing this?

Thanks in advance.

What's the purpose? Are you trying to replicate HMR functionality of Webpack dev server/middleware? — Estus Flask
– Estus Flask, Commented Sep 9, 2016 at 10:07
Every JS view has it own style. When I change the view, style from the previous view remains appended in the HTML. — Damjan Pavlica
– Damjan Pavlica, Commented Sep 9, 2016 at 10:12
@DamjanPavlica In that case you might not want a generic style-loader. You could use css-loader and put a <style> tag inside your view. — CodingIntrigue
– CodingIntrigue, Commented Sep 9, 2016 at 10:20
I'm not sure that it is a good idea to integrate with Webpack on that level. E.g. Angular 2 starter kit uses to-string-loader with css-loader to make them inline styles (Angular 2 also uses shadow DOM to isolate view/component style). — Estus Flask
– Estus Flask, Commented Sep 9, 2016 at 10:25

Tarnay Kálmán · Accepted Answer · 2020-03-11 23:16:21Z

2

With style-loader, you could mark some of your css files lazy, and call .use() when mounting the route, and .unuse() when unmounting the route.

React hooks example:

import styles from './styles.lazy.css';

export function LegacyRoute() {
  useLayoutEffect(() => {
    styles.use();
    return () => { styles.unuse() };
  }, []);
  return <p>Hello World</p>;
}

webpack config:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /\.lazy\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.lazy\.css$/i,
        use: [
          { loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
          'css-loader',
        ],
      },
    ],
  },
};

Source: https://github.com/webpack-contrib/style-loader#lazystyletag

edited Mar 11, 2020 at 23:16

answered Mar 11, 2020 at 12:30

Tarnay Kálmán

7,0766 gold badges48 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to remove/unimport inline CSS with Webpack?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related