如何使用Webpack删除/不使用内联CSS?

时间:2016-09-09 08:00:45

标签: ecmascript-6 webpack inline-styles webpack-style-loader

好的,我已经导入了一个带有Webpack style-loadercss-loader的css文件,如下所示:

import './style.css'

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

提前致谢。

2 个答案:

答案 0 :(得分: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>;
}

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

答案 1 :(得分:0)

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