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()卸载路由时调用。

反应钩子示例：

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

Answer 2

不是这个问题的确切答案，但如果您正在寻找 create-react-app 解决方案并且无法编辑，webpack.config.json请查看此答案：https ://stackoverflow.com/a/67352039/5648839