fz6m
commented
1 year ago 用你这个代码我添加了一行 css 后控制台提示：
00:09:56 [vite] hmr update /src/pages/index.tsx正常 HMR 热更新了。
如还有问题，需要给一个确切的复现和更多上下文。
Open carotte-tomato opened 1 year ago
fz6m
commented
1 year ago 用你这个代码我添加了一行 css 后控制台提示：
00:09:56 [vite] hmr update /src/pages/index.tsx正常 HMR 热更新了。
如还有问题，需要给一个确切的复现和更多上下文。
carotte-tomato
commented
1 year ago @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: falseimport styles from './index.module.less'@xierenyuan 有时间可以看下这个问题 🌹 ，复现方式为连续修改两次 index.less 文件内容。
zackBRAVE
commented
9 months ago 不止vite模式，mfsu也一样存在这个问题，连续两次修改样式文件就会导致刷新页面，修复工作没有进展了吗
fz6m
commented
9 months ago 我使用最新的 umi 4 版本，不开启 vite ，只是 mfsu 没遇到你说的改两次会刷新页面的问题，如有问题，给一个最小复现看看吧。
carotte-tomato
commented
8 months ago 不止vite模式，mfsu也一样存在这个问题，连续两次修改样式文件就会导致刷新页面，修复工作没有进展了吗
开启vite的情况下，可以自己基于umi已有的autoCssModulePlugin改一下就行，umi这里的plugin就是把import xxx from [css|less|sass|scss|styl|stylus]这种场景的引入路径后缀补充了?module.css来满足vite的cssModuleRE。
目前umi的实现，补充?.module.css会导致hmr解析依赖路径出问题，从而导致page-reload，我这里把补充字符串改成了?umi.module.css就没问题了😂
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
https://github.com/umijs/umi/blob/352b0a8bc2620df29a5f43d984e0c654344defea/packages/bundler-vite/src/plugins/autoCSSModule.ts#L31
目前定位到是这里添加的
?.module.css后缀在vite hmr插件处理依赖模块的时候会被转换成?&.module.css导致的page reload，但是vite这块的代码目前还没有看透，为什么会转成这样还不知道。 解决方案是把autoCSSModule插件添加的后缀?.module.css改成?umi.module.css这样的格式就能通过cssModuleRE的检测并解决该问题。