vue sfc中@import sass样式不生效的根本原因是scoped会为元素添加data-v-xxx属性选择器，但外部@import的sass文件未参与vue编译流程，导致生成的选择器缺失该属性而无法匹配。
Vue SFC 中 @import Sass 文件时样式不生效
根本原因是 <style scoped></style> 会为元素添加属性选择器（如 data-v-f3f3eg9），但 @import 进来的 Sass 文件默认不会被 Vue 编译器识别为需作用域处理的源，导致编译后生成的选择器没带 data-v-xxx 属性，自然无法匹配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
@import放在<style lang="scss" scoped></style>标签内部，确保它参与 Vue 的 scoped 编译流程 - 不要在外部
.scss文件里写带&或嵌套的、依赖父级 scope 的规则——它们会被编译成普通 CSS，失去作用域约束 - 若需复用变量/混入（
@mixin），推荐单独建variables.scss和mixins.scss，用@use或@import引入，且只放纯逻辑，不写实际样式规则
lang="scss" 与 lang="sass" 的行为差异
Vue 官方文档常混用这两个值，但底层处理完全不同：lang="scss" 对应 SCSS 语法（大括号+分号），lang="sass" 对应缩进语法（无大括号/分号）。一旦写错，Vite 或 Vue CLI 会直接报错 Invalid CSS after... 或解析失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
lang="scss"，除非团队强依赖缩进语法；绝大多数 UI 库（如 Element Plus）示例和变量文件都基于 SCSS - Vite 项目中确认已安装
sass（非node-sass），后者已废弃且不兼容 Node.js 16+ - 检查
vite.config.ts是否有误配css.preprocessorOptions.sass—— 这个配置实际影响的是lang="sass"，而lang="scss"应配scss字段
Scoped 下使用 ::v-deep / :deep() 仍不生效
常见于对子组件样式穿透，但写了 :deep(.el-button) 却无效。问题往往出在：父组件用了 scoped，子组件没用，或子组件是第三方库组件（无 data-v-xxx 属性），导致选择器无法命中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
:deep()只能作用于当前组件模板中渲染出的子节点，不能跨“无 scope”的第三方组件根元素——比如<el-dialog></el-dialog>的根<div> 没带 <code>data-v-xxx，就得靠:global(.el-dialog .el-button) - 避免嵌套过深的
:deep()，例如:deep(.a) :deep(.b) :deep(.c)，Vue 会把它编译成带多个data-v-xxx的选择器，而目标元素只带一个，必然不匹配 - 优先用
:deep()包裹最小必要选择器，如:deep(.el-input__inner)，而非整段嵌套结构 - 在
vite.config.ts中配置css.preprocessorOptions.scss.additionalData，全局注入变量，例如：additionalData: `@use "@/styles/variables.scss" as *;`
- 禁用所有组件内
@import变量文件的行为，仅保留业务样式逻辑 - 如果必须局部覆盖变量（如主题色），改用 CSS 自定义属性（
--primary-color）配合:root或组件级style="--primary-color: red;"，更可控也更轻量
全局变量在多个 <style scoped></style> 中重复注入
有人习惯在每个 <style scoped lang="scss"></style> 顶部写 @import "@/styles/variables.scss";，看似没问题，但 Webpack/Vite 会为每个文件单独执行一次导入，导致变量重复定义（尤其含 !default 时可能意外覆盖）、编译变慢、HMR 失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
data-v-xxx、哪一环只管转译、哪一环根本看不到 Vue 的 scope 上下文——漏掉任一环节，样式就“消失”得毫无征兆。
