Vue3中SCSS样式不生效主因是scoped隔离、编译未触发或:deep()穿透失效；须先查DevTools中目标元素是否有对应样式，再针对性排查。
Vue3组件中SCSS样式不生效，绝大多数情况不是语法写错，而是被 scoped 隔离、编译未触发、或深度穿透失效这三类机制卡住——先看浏览器 DevTools 的 Computed 面板里目标元素是否真有对应样式，再往下排查。
scoped 属性导致子组件/第三方组件样式无法穿透
加了 scoped 的 <style lang="scss" scoped> 会为当前组件所有元素自动添加 data-v-xxx 属性，并重写选择器匹配逻辑。这意味着：
- 你写的
.el-input样式根本不会作用到<el-input>组件内部，因为它的根节点没有这个data-v-xxx - 父组件想改子组件样式，必须用
:deep()（Vue3 推荐），不能用已废弃的::v-deep或无效的>>> -
:deep()只能作用于直接子选择器，嵌套过深（比如:deep(.a .b .c)）可能因编译后属性选择器位置错位而失效
正确写法示例：
<style lang="scss" scoped>
.my-form {
:deep(.el-input__inner) {
border-radius: 4px;
}
}
</style>
SCSS 全局变量/mixin 在组件内报 Undefined mixin
Vite + Vue3 默认不会把全局 SCSS 文件自动注入每个组件作用域，即使你在 vite.config.js 中配置了 additionalData，也只影响「单个组件内直接写的 SCSS」，不自动暴露给 @use 或 @import 的模块上下文。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 错误现象：
@include custom-padding(lg)报Undefined mixin - 根本原因：组件内没显式
@use "@/styles/mixins.scss" as *;，或additionalData里用了@import（已被 Sass 官方弃用） - 推荐做法：在
vite.config.js中用@use+as *全局暴露，例如：@use "@/styles/mixins.scss" as *; - 注意：如果项目用了
@use命名空间（如@use "@/styles/mixins" as m;），调用时必须写@include m.custom-padding(...)
组件没写任何样式导致 SCSS 编译被跳过
Vite 的 SCSS 处理是按需编译的——如果一个 <style lang="scss" scoped> 标签里完全空白、只有注释、或只写了纯 CSS（没用到 @mixin/@function 等 SCSS 特性），Vite 可能直接跳过 SCSS 解析流程，导致依赖的全局变量、@import 的文件都没加载。
- 典型表现：全局颜色变量
$primary-color在该组件里显示为未定义，但其他组件正常 - 临时解法：在空
<style>里加一行无意义 SCSS，比如// hack: force scss compile或$dummy: 0; - 长期建议：统一在组件顶部加
@use "@/styles/variables.scss" as *;，既明确依赖，又强制触发编译
DevTools 显示 class 存在但 computed 无 display:flex
这说明样式规则压根没进渲染树，不是优先级问题，而是规则被丢弃或中断：
- 检查父元素是否用了
display: contents—— 它会让父元素不参与盒模型，导致子元素的flex上下文丢失 - 确认没在某个中间层写了
display: block !important，尤其注意 reset.css / normalize.css 或 UI 框架的基类（如div { display: block !important; }） - 查看元素上是否有多个
data-v-xxx属性（比如父子组件都scoped且未用:deep()），会导致选择器生成异常，最终匹配失败 - 动态绑定 class 时，检查 JS 是否拼错类名（如
class="item"但 SCSS 写了.items），这类错误在 DevTools 的Elements面板一眼可见
真正卡住人的往往不是“怎么写”，而是“为什么写了却没进浏览器”——盯着 Computed 面板里的 display 值，比反复改 !important 有用得多。
