vue3中scss样式不生效主因是scoped隔离、编译未触发或:deep()穿透失效；须先查devtools中目标元素是否有对应样式，再针对性排查。
Vue3组件中SCSS样式不生效，绝大多数情况不是语法写错，而是被 scoped 隔离、编译未触发、或深度穿透失效这三类机制卡住——先看浏览器 DevTools 的 Computed 面板里目标元素是否真有对应样式，再往下排查。
scoped 属性导致子组件/第三方组件样式无法穿透
加了 scoped 的 <style lang="scss" scoped></style> 会为当前组件所有元素自动添加 data-v-xxx 属性，并重写选择器匹配逻辑。这意味着：
- 你写的
.el-input样式根本不会作用到<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 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
Vue3.x 工具篇--十天技能课堂
共26课时 | 2.5万人学习
Vue3.x 核心篇--十天技能课堂
共30课时 | 2.4万人学习
Vue3.x新特性篇--十天基础课堂
共20课时 | 1.7万人学习
最新文章