好的,我已经导入了一个带有Webpack style-loader
和css-loader
的css文件,如下所示:
import './style.css'
Webpack通过style
标记将其附加到我的页面。到现在为止还挺好。但是,当应用程序状态发生变化时,我想删除这种特殊的样式。当然,我可以用document.querySelector('style')
删除它,但有没有一些自然的Webpack方式呢?
提前致谢。
答案 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>