Vue项目CSS样式不生效，大概率是文件未加载或被隔离/覆盖；应先查Network面板是否404，再验Elements中computed styles，最后定位覆盖源。
Vue项目引入CSS后组件样式不生效，**大概率不是代码写错了，而是样式根本没加载进来，或者加载了但被隔离/覆盖了**。直接看 Network 面板有没有 404，再打开 Elements 面板检查 computed styles 里有没有对应规则，比瞎改选择器快得多。
检查 CSS 文件是否真的加载成功
这是第一步，也是最容易被跳过的一步。很多“样式不生效”其实是假象——文件压根没请求到。
- 打开浏览器 DevTools → Network → 切到
Filter输入css，刷新页面，看引入的 CSS 文件状态码是不是200；如果出现404，说明路径错了 - 用相对路径时，
./assets/style.css和../assets/style.css差一层就 404；Vite 中@import的路径是相对于当前 CSS 文件，不是index.html - Vue CLI 项目要检查
vue.config.js中的publicPath：值为'/'会走绝对路径，部署到子目录时必挂；应改为'./'或根据实际部署路径配置 - 如果是后端（如 Spring Boot）托管静态资源，确认
mvc:resources或等效配置已放行.css路径，否则拦截器会吞掉请求，返回空白或 404
确认样式是否被 scoped 隔离或未穿透
<style scoped></style> 不是“让样式生效”的开关，而是“限制它只对当前组件 DOM 生效”的开关。第三方组件（如 Vant、Element Plus）的 DOM 并不在你的组件模板内，所以你 scoped 里的规则匹配不到它们。
- 想覆盖第三方组件内部样式（比如改
el-button的背景色），必须用深度选择器：::v-deep .el-button（Vue 3）或:deep(.el-button)（组合式 API 中推荐） - 不要在
<style scoped></style>里写.van-button { ... }—— 这条规则会被编译成带data-v-xxx属性的选择器，而<van-button></van-button>根节点不带这个属性，自然不匹配 - 框架样式（如
vant/lib/index.css）必须引入在非 scoped 的<style></style>块，或单独作为全局 CSS 文件（如main.js中import 'vant/lib/index.css'） - 按需引入 Vant 时，别只 import 组件 JS，漏掉
style.js：例如import { Button } from 'vant'; import 'vant/es/button/style';
排查加载顺序与 CSS 优先级冲突
CSS 是从上到下解析的，后加载的同权重规则会覆盖前面的。Tailwind、重置样式、组件库、自定义样式，谁在前谁在后，结果天差地别。
立即学习“前端免费学习笔记（深入）”；
- 确保 UI 框架的 CSS 在你自己的样式之前引入：比如
main.js中先import 'element-plus/dist/index.css'，再import './styles/app.css' - Tailwind 默认启用
@layer base重置样式，极易覆盖组件库的默认边距、字体、display 等；可在tailwind.config.js的content中排除组件库相关路径，或用@layer components封装自定义规则，避免污染 - 不要滥用
!important去硬盖，优先提高选择器 specificity：比如用.my-form .el-input__inner替代单纯.el-input__inner - 构建工具（如 Vite）若启用了 CSS tree-shaking（如 UnoCSS、PurgeCSS），确认配置中保留了你用到的类名，否则打包时直接删掉了
验证类名是否真实存在且拼写正确
看起来写了 class="btn-primary"，但 Bootstrap 5 已弃用该类，实际要用 class="btn btn-primary"；Vant 4 的 van-button--primary 是修饰符类，漏掉 van-button 基础类就全失效。
- 打开 DevTools → Elements，点开目标元素，看 class 列表里真实渲染出的类名是什么，而不是凭记忆或文档截图写
- 不同版本组件库类名差异极大：Bootstrap 4/5、Element UI/Plus、Ant Design Vue 3.x/4.x 的类名体系完全不同，查对应版本的官方文档
- 某些框架（如 Bulma）要求父级或根元素带特定 class 才激活样式，比如
，漏掉就“失效” - v-html 渲染的内容不会被 scoped 样式影响（因为没加
data-v-xxx属性），这类动态内容需用全局样式或内联 style 处理
真正卡住人的，往往不是“怎么写”，而是“为什么没进浏览器”。Network 看请求，Elements 看渲染，computed styles 看最终计算值——这三步做完，90% 的“样式不生效”问题已经定位清楚。剩下的只是选对选择器、调好顺序、配对版本而已。
