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

Question

好的，我已经用 Webpack 导入了一个 css 文件 style-loader和 css-loader像这样:

import './style.css'

Webpack 通过 style 将其附加到我的页面标签。到现在为止还挺好。但是，当应用程序的状态发生变化时，我想删除这种特殊的样式。当然，我可以用 document.querySelector('style') 删除它，但是有一些自然的 Webpack 方法可以做到这一点吗？

提前致谢。

Answer 1

使用 style-loader，您可以将一些 css 文件标记为惰性，然后调用 .use()安装路线时，.unuse()卸载路线时。

react 钩子(Hook)示例:

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

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

网络包配置:

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