-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug] [HMR] page reload when use umi vite mode with auto css modules enabled #11820
Comments
用你这个代码我添加了一行 css 后控制台提示: 00:09:56 [vite] hmr update /src/pages/index.tsx 正常 HMR 热更新了。 如还有问题,需要给一个确切的复现和更多上下文。 |
@fz6m =。=我试了下第一次是会更新tsx走hmr update,但是你再改一次或者直接保存一次就能复现了,我本地用这个代码稳定复现 4:19:52 PM [vite] hmr update /src/pages/index.tsx
4:19:58 PM [vite] page reload src/pages/index.less |
目前的解决方法是:关闭 auto css modules 以常规方式使用 css module ,即使用不同的命名区分开是否为 css module 文件。 // .umirc.ts
autoCSSModules: false import styles from './index.module.less' |
@xierenyuan 有时间可以看下这个问题 🌹 ,复现方式为连续修改两次 |
不止vite模式,mfsu也一样存在这个问题,连续两次修改样式文件就会导致刷新页面,修复工作没有进展了吗 |
我使用最新的 umi 4 版本,不开启 vite ,只是 mfsu 没遇到你说的改两次会刷新页面的问题,如有问题,给一个最小复现看看吧。 |
开启vite的情况下,可以自己基于umi已有的autoCssModulePlugin改一下就行,umi这里的plugin就是把 目前umi的实现,补充 |
What happens?
when update css file with autocssmodule enabled, like
import styles from "./index.less"
, vite hmr will trigger page reload like thisAM [vite] page reload src/components/build-vm-modal/panels/steps-panel/index.less
.umi现在默认开启autocssmodule,使用
import styles from "./index.less"
的样式时会通过autoCSSModule
带上?.module.css
的后缀来触发vite的cssmodule机制,但是会导致vite的hmr不能部分更新css内容变更,每次都会刷新页面。Mini Showcase Repository(REQUIRED)
https://github.com/carotte-tomato/umi-vite-hmr-issue/tree/master
基于
create-umi
生成的代码,配置了vite: {}
,补上了src/pages/index.less
,复现最小集How To Reproduce
Steps to reproduce the behavior:
change
/src/pages/index.less
, modify the value of container's padding.修改
/src/pages/index.less
里面的样式,即container的padding值Expected behavior
页面hmr应该是部分更新,而不是整个页面都刷新了,现在可以观察到控制台提示都是page reload
2:16:06 PM [vite] page reload src/pages/index.less (x4)
Context
Suggestions
umi/packages/bundler-vite/src/plugins/autoCSSModule.ts
Line 31 in 352b0a8
目前定位到是这里添加的
?.module.css
后缀在vite hmr插件处理依赖模块的时候会被转换成?&.module.css
导致的page reload,但是vite这块的代码目前还没有看透,为什么会转成这样还不知道。解决方案是把autoCSSModule插件添加的后缀
?.module.css
改成?umi.module.css
这样的格式就能通过cssModuleRE的检测并解决该问题。The text was updated successfully, but these errors were encountered: