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

Posted 2023-02-21

【中文标题】如何使用 Webpack 删除/取消导入内联 CSS？

【英文标题】：How to remove/unimport inline CSS with Webpack?

【发布时间】：2017-01-17 07:33:30

【问题描述】：

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

import './style.css'

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

提前致谢。

【问题讨论】：

目的是什么？您是否尝试复制 Webpack 开发服务器/中间件的 HMR 功能？

每个 JS 视图都有自己的风格。当我更改视图时，前一个视图的样式仍然附加在 html 中。

@DamjanPavlica 在这种情况下，您可能不需要通用样式加载器。您可以使用css-loader 并在您的视图中添加<style> 标签inside。

我不确定在那个级别上与 Webpack 集成是否是个好主意。例如。 Angular 2 starter kit 使用to-string-loader with css-loader 使它们成为内联样式（Angular 2 也使用 shadow DOM 来隔离视图/组件样式）。

psst, meta.***.com/questions/334859/…

【参考方案1】：

使用 style-loader，您可以将一些 css 文件标记为惰性，并在挂载路由时调用 .use()，在卸载路由时调用 .unuse()。

React 钩子示例：

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

【参考方案2】：

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