Loading `@import`-ed CSS files breaks Webpack Hot Reloading
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 35/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- javascript, webpack
- 领域
- build-system
调研方向
从链接的复现仓库开始：运行 yarn install 和 yarn run start，然后使用 main.css 及其通过 @import 引入的 imported.css 重现错误恢复流程。跟踪为什么修正 imported.css 中的无效编辑不会被检测到，并在无需重启 webpack 的情况下热重载成功重新构建它时，认为该 issue 已完成。
由索引模型根据 Issue 内容生成。
描述
Bug report
Actual Behavior
If you make an edit to an @import-ed CSS file that results in an error (e.g. invalid CSS), webpack hot reloader no longer detects further changes in that file - even if you correct or undo the edit (CTRL-Z). You need to restart webpack for it to start detecting the file again.
This is only in the specific scenario of a breaking change. Any valid change continues to be detected by hot reloading.
This is also specific to only @import-ed files. Any change to a top-level file that is not imported by another CSS file continues work with hot reloading.
Expected Behavior
Webpack Hot Reloader should continue detecting updates to the previously edited file. If the error is corrected, it should recompile and emit the successful file.
How Do We Reproduce?
Here is a repository to reproduce it: https://github.com/abhchand/webpack-postcss-hmr-issue-reproduction. This repo uses postcss to run Tailwind CSS.
- Clone the repo
- Run
yarn install, thenyarn run start - Open http://localhost:3035/
You'll notice there are 2 CSS files - main.css and imported.css. The second one is @import-ed by the first.
You can reproduce the following scenarios:
| action | result |
|---|---|
In main.css, make some breaking change (e.g. change tw:h-9 to tw-h-9) |
🟢 Hot reloading should detect the change and present the error |
In main.css, correct the above breaking change |
🟢 Hot reloading should detect the change and rebuild the file |
In imported.css, make some breaking change (e.g. change tw:border-green-500 to tw-border-green-500) |
🟢 Hot reloading should detect the change and present the error |
In imported.css, correct the above breaking change |
🔴 Hot reloading does not detect the change and remains in error. |
The only way to fix the last scenario is to restart webpack.
Please paste the results of npx webpack info here
$ npx webpack info
System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
Memory: 7.60 GB / 15.36 GB
Binaries:
Node: 18.20.7 - ~/.nvm/versions/node/v18.20.7/bin/node
Yarn: 1.22.22 - ~/.yarn/bin/yarn
npm: 10.8.2 - ~/.nvm/versions/node/v18.20.7/bin/npm
Browsers:
Chrome: 117.0.5938.132
Packages:
babel-loader: ^8.1.0 => 8.4.1
css-loader: ^4.2.0 => 4.3.0
html-webpack-plugin: ^5.5.0 => 5.6.3
postcss-loader: ^7.0.1 => 7.3.4
webpack: ^5.74.0 => 5.98.0
webpack-cli: 4.10.0 => 4.10.0
webpack-dev-server: ^4.11.1 => 4.15.2
- 主要语言
- JavaScript
- 星标
- 2.8k
- 派生
- 211
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
webpack/postcss-loader 的其他 Issue
-
难度 4/5 3-5 天 新手友好度 35/100
webpack/postcss-loader#623 · 9 条评论 ·
查看 webpack/postcss-loader 的全部 Issue
相似的 Issue
-
agent/scanner bug hive/hosted-available-lke648397-260827-5n31
难度 2/5 1-3 小时 新手友好度 75/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 65/100
rescript-lang/rescript#8765 ·
维护者通常 1 天内回复
-
feedback simulation workshop
难度 2/5 1-3 小时 新手友好度 62/100
githubnext/gh-aw-workshop#4417 ·
维护者通常 1 天内回复
-
Good First Issue hacktoberfest
难度 2/5 1-3 小时 新手友好度 85/100
hiero-ledger/hiero-sdk-js#4489 ·
维护者通常 1 天内回复
-
Add: RiC Feed未关闭check:passed feeds:add
难度 1/5 1 小时以内 新手友好度 74/100
维护者通常 9 天内回复