绝大多数CSS加载失败源于import路径错误：Vue CLI中应使用@/别名（如import '@/assets/css/main.css'），误用./src/或/开头路径会导致静默失败；需通过Network面板验证请求是否发出及状态码是否为200。
import 语句路径错误导致 CSS 加载失败
绝大多数“CSS 不生效”问题，根源是 import 路径写错，而不是构建配置或作用域问题。Vue CLI 默认支持 @/ 别名指向 src/，但很多人误写成 ./src/ 或漏掉 @，导致模块解析失败，Webpack 静默忽略（不报错但也不注入样式）。
-
import '@/assets/css/main.css'✅ 正确（@是 Vue CLI 内置别名） -
import './src/assets/css/main.css'❌ 错误（相对路径从当前文件出发，不是从项目根目录） -
import '/src/assets/css/main.css'❌ 错误（绝对路径在 Node 模块解析中无效）
验证方式：打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 查看是否有 main.css 请求，状态码是否为 200。若无请求或返回 404，就是路径问题。
打包后 CSS 文件 404：publicPath 配置不当
开发时正常，build 后部署到 Nginx 或子路径下 CSS 报 404，本质是资源引用路径生成错误。Vue CLI 默认把所有静态资源路径设为绝对根路径（/css/app.xxx.css），但你的服务没部署在域名根目录下（比如部署在 https://example.com/myapp/），就会 404。
- 检查
vue.config.js是否设置了publicPath: './'（注意是字符串'./'，不是'/'） - 如果用的是 Vue CLI 5+，确认没有同时设置
baseUrl（已废弃，会被publicPath覆盖） - 构建后打开
dist/index.html，直接查看<link href="...">的 href 值——它必须是相对路径（如css/app.xxx.css），而非/css/app.xxx.css
改完必须重新运行 npm run build，旧 dist 文件夹不会自动更新。
立即学习“前端免费学习笔记（深入）”；
样式被 scoped 隔离或选择器失效
组件内 <style scoped> 中的 CSS 看似写了，但实际没生效，常见于三类情况：
- 想影响子组件但没穿透：例如父组件
<style scoped>里写.child { color: red }，而子组件根元素是<div class="child">—— 这个.child不会匹配，因为 scoped 会给父组件加data-v-xxx属性，但子组件根节点没有该属性 - 用了
::v-deep但写法错误：必须写在顶层选择器后，不能嵌套在&或@media内；Sass 中要写成::v-deep .target，不能写.parent ::v-deep .target（后者不生效） - 选择器优先级被覆盖：第三方库（如 Element Plus）的 CSS 通常更具体（如
.el-button.is-primary），你写.btn很难覆盖，需加权或用!important（仅临时调试用）
快速验证：打开 DevTools → Elements → 找目标元素 → 看右边 Styles 面板，哪些规则被划掉（strike-through），被谁覆盖，就一目了然。
第三方 CSS（如 photoswipe）引入报 Module build failed
这个错误不是 CSS 本身问题，而是 Webpack 尝试用 postcss-loader 处理非标准 CSS（比如含注释、特殊语法或 UTF-8 BOM）时崩溃。典型报错行：Unknown word 或 Syntax Error (5:1)。
- 先用 VS Code 或 Sublime 打开该 CSS 文件，另存为 UTF-8（无 BOM）编码
- 删掉文件开头可能存在的注释块（尤其是多行注释
/* ... */包裹的说明文字） - 临时移除
postcss-loader测试：在vue.config.js的css.loaderOptions.postcss中设为空对象，或注释掉整个postcss配置 - 更稳妥做法：不走
import，改用<link rel="stylesheet">直接引入 CDN 版本（如https://cdn.jsdelivr.net/npm/photoswipe@5.4.3/dist/photoswipe.css）
注意：不要尝试重装 style-loader 或调换 loader 顺序——这类报错和 loader 执行顺序无关，是 postcss 解析器遇到非法 token 导致的。
真正卡住人的问题，往往藏在路径拼写、publicPath 和 scoped 作用域这三处。它们不报红错，只静默失效，排查时得盯着 Network 和 Elements 面板看真实加载结果，而不是只盯控制台有没有报错。
