如何使用Webpack删除/取消导入内联CSS？

Question

[好，我已经用Webpack style-loader和css-loader导入了一个CSS文件，如下所示：

import './style.css'

Webpack通过style标签将其附加到我的页面。到目前为止，一切都很好。但是，当应用程序状态更改时，我想删除此特定样式。当然，我可以用document.querySelector('style')删除它，但是有一些自然的Webpack方式可以做到这一点吗？

提前感谢。

Answer 1

反应钩示例：

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

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

webpack配置：

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',
        ],
      },
    ],
  },
};

来源：https://github.com/webpack-contrib/style-loader#lazystyletag