怎么让 CSS 文件自动从 Sass/Less 编译并带上哈希名
不手动改文件名，又想缓存生效、上线不踩 304 失效的坑，就得靠构建工具生成带内容哈希的文件名。Webpack 是最常见选择，但容易漏掉两个关键配置：filename 和 chunkFilename 都得显式写 [contenthash]，只写在 JS 里而忽略 CSS，打包后 CSS 还是没哈希。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
MiniCssExtractPlugin替代style-loader，它才能输出独立 CSS 文件并支持哈希 -
filename: '[name].[contenthash:8].css'必须加在MiniCssExtractPlugin的filename选项里，不是写在output.filename - 如果用了 CSS @import 或动态
import()，还得配chunkFilename，否则异步加载的 CSS 没哈希 - Vite 用户直接开
build.rollupOptions.output.entryFileNames和assetFileNames，其中assetFileNames要匹配css并插[hash]
HTML 中怎么自动注入带哈希的 CSS link 标签
手写 <link rel="stylesheet" href="index.abc123.css"> 不现实——哈希每天变，硬编码等于自废构建链路。核心是让构建工具读取最终产出的 CSS 文件名，并写进 HTML。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Webpack 下用
HtmlWebpackPlugin，默认就做这件事；但若关了inject: true或用了自定义 template，就得在模板里用htmlWebpackPlugin.files.css手动遍历输出 - 注意：如果 CSS 是通过
import动态加载（比如路由级 CSS），htmlWebpackPlugin.files.css可能为空——因为那些 CSS 属于 chunk，不在主 entry 的依赖图里 - Vite 用户别碰
index.html里的<link>，Vite 会自动注入；但如果你用build.rollupOptions.plugins加了自定义插件，得确保它不提前清空或覆盖generateBundle阶段的 asset 注入逻辑
为什么本地开发时 CSS 热更新失效，但构建后又正常
典型现象：改一行 Sass，页面没刷新，控制台也没报错，但重新 npm run build 后新 CSS 确实生效。本质是开发服务器和构建流程用了两套 CSS 处理路径。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Webpack Dev Server 默认用
style-loader把 CSS 插进<style></style>标签，不走文件系统，所以没有“CSS 文件”可被 HMR 监听——热更新靠的是 JS 模块重载，不是文件替换 - 如果强行在 dev 模式下也用
MiniCssExtractPlugin，会导致 HMR 完全失效（它只输出文件，不支持内存注入） - Vite 的
import './index.scss'默认就是 HMR 友好，但若你写了document.createElement('link')手动挂载 CSS，那就绕过了 Vite 的 HMR 注册机制，得自己调import.meta.hot.accept - 检查浏览器 Network 面板里 CSS 请求的响应头：dev 模式下应是
200 OK+Content-Type: text/css，而不是304 Not Modified却没更新内容——后者说明缓存策略或监听器没生效
CDN 场景下 CSS 引入路径突然 404 怎么定位
构建产物上传 CDN 后，HTML 里引用的 CSS 路径是相对的（如 ./assets/index.a1b2c3.css），但 CDN 域名和 HTML 所在域名不一致时，浏览器按 HTML 当前 URL 解析相对路径，极易出错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Webpack 的
output.publicPath必须设为完整 CDN 地址（如https://cdn.example.com/v1.2.3/），不能是/或./；否则MiniCssExtractPlugin输出的 CSS 引用路径仍相对 - Vite 的
base配置同理，必须是绝对 URL，且末尾带/，否则assetFileNames生成的路径拼接会丢一级目录 - 检查最终 HTML 源码里
<link href="...">的值：如果是相对路径，说明publicPath或base没生效；如果是绝对路径但域名不对，大概率是环境变量没透传进构建过程 - CI/CD 中常漏掉
cross-env NODE_ENV=production，导致开发配置被误用，publicPath仍是/
哈希名和路径注入看着是配置问题，实际每一步都卡在「谁生成文件」「谁读取文件名」「谁写进 HTML」「谁解析路径」这四个角色是否对齐。少一个环节同步，就变成手动修路径、清缓存、查 404——而且往往只在上线后才暴露。
