生产环境css失效主因是路径不匹配与构建配置错误：publicpath、filename与html插入路径不一致，css中url()相对路径失效，@import未内联，以及purgecss误删动态class。
开发环境能引入 CSS、生产环境失效，基本不是代码写错了，而是构建产物路径和运行时请求路径对不上——浏览器在找文件，但文件不在它以为的位置。
Webpack/Vite 输出路径和 HTML 中 link 路径不一致
构建工具把 CSS 打包进 static/css/app.abc123.css，但 HTML 里生成的 <link href="css/app.css"> 却去请求根目录下的 /css/app.css，404 就这么来的。
-
output.publicPath设为空字符串或错误值（如''或'/dist/'），会导致所有静态资源引用前缀错位 -
MiniCssExtractPlugin.filename和html-webpack-plugin插入路径不匹配：一个输出到css/[name].[hash].css，另一个却往styles/[name].css插 - Vite 用户要检查
build.base是否与部署路径一致，比如部署到子路径/my-app/，就得设base: '/my-app/'，否则<link href="/style.css">会直接请求根域
CSS 中 url() 路径以构建后 CSS 文件位置为基准解析
源码里写 background: url('../img/bg.png')，开发时没问题；构建后 CSS 被抽到 /static/css/app.css，图片却在 /static/img/bg.789def.png，相对路径就断了。
- 别依赖相对路径读图：CSS 文件位置一变，
url()就失效 - 推荐把图放
public/目录下，用绝对路径：url('/assets/bg.png')，这样路径可控、不参与哈希、不被构建工具误判 - 若必须走构建流程（如小图标需压缩+哈希），改用 JS 动态导入：
import icon from '@/assets/icon.png'，再通过:style="{ backgroundImage: `url(${icon})` }"绑定
@import 在生产环境串行加载且常被构建工具忽略
原生 @import 不是构建时内联，而是运行时由浏览器执行，强制串行下载，还容易被 Webpack/Vite 当作普通字符串保留，导致首屏白屏拉长、样式延迟生效。
- 搜构建产物 CSS 文件里的
@import，只要还有，就是隐患 - PostCSS 若没配
postcss-import或配置漏掉skipDuplicates: false，@import就不会被提前合并 - 替换成
<link rel="stylesheet">时，注意保持原@import的顺序——重置类、工具类必须在组件样式之前
Tailwind 的 PurgeCSS 误删动态 class
模态框、Axios 加载的内容里有 text-red-500，但这个 class 是 JS 拼出来的，PurgeCSS 扫不到源码字面量，就直接删了。
-
content数组必须显式覆盖所有含 class 的文件，包括.html、.vue、.tsx，扩展名一个都不能少 - 动态拼接的 class（如
className={`p-${size}`}）必须进safelist，正则要写准，比如/p-(sm|md|lg)/，不能只写/p-/ - 临时注释掉
content字段跑一次 build：如果样式全回来了，问题就锁定在 Purge 配置
真正容易被忽略的是：构建工具不会“理解”你的业务逻辑。它只按配置扫描文本、替换路径、删除未用代码。路径错一位、glob 少一个星号、safelist 漏一个正则分支，生产环境就出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
