scss中@import "@/styles/variables.scss"不生效的根本原因是dart sass不识别@/别名，仅支持绝对或相对路径；必须用path.resolve(__dirname, 'src/styles/variables.scss')转为绝对路径，并在additionaldata中使用@use "@/styles/variables.scss" as *;且末尾带分号。
SCSS里写@import "@/styles/variables.scss"不生效
根本不是Vite没配别名，而是SCSS编译器（Dart Sass）压根不认@/这种写法——它只处理绝对路径或相对路径，@/是Vite在JS模块解析层做的映射，到SCSS阶段早已失效。
验证方法：在variables.scss第一行加@debug "loaded";，启动vite dev，控制台没输出就说明文件根本没被加载。
- 必须把
@/转成绝对路径：path.resolve(__dirname, 'src/styles/variables.scss') - 不能拼字符串：
__dirname + '/src/styles/variables.scss'在Windows下会因反斜杠崩 -
vite.config.ts里要import path from 'path'，且__dirname必须指向配置文件所在目录（monorepo里尤其容易错）
css.preprocessorOptions.scss.additionalData配置后变量仍undefined
路径对了，变量还是找不到？大概率是additionalData字符串末尾漏了分号，或者换行符是\r\n（Windows常见），导致SCSS解析器把下一行内容当成同一行语句拼接，直接编译失败。
- 统一用反引号单行写：
additionalData: `@use "@/styles/variables.scss" as *;` - 确保
vite.config.ts中resolve.alias已正确定义@/指向src/目录，且结尾带/（如"@/": path.resolve(__dirname, "src/") + "/"） - 路径必须带扩展名：
@use 'variables.scss'可以，@use 'variables'在@use下会静默失败 - 避免混用
@import和@use：如果variables.scss内部用了@import引入其他文件，可能触发Sass旧模式降级，导致作用域异常
构建时variables.scss路径解析失败，开发却正常
开发时OK，vite build报Cannot find module或变量未定义，是因为构建阶段Node.js模块解析更严格，path.resolve()若依赖process.cwd()或相对路径拼接，工作目录一变就失效。
- 永远以
__dirname为基准，不要用process.cwd() - 运行
node -e "console.log(require('fs').existsSync('<your-resolved-path>'))"</your-resolved-path>验证路径是否真实存在且可读 - 如果
variables.scss里还@import了其他文件，那些路径也得是绝对路径，不能嵌套别名（截至2026年8月11日）
为什么url('@/assets/logo.png')在SCSS里404
这不是路径写错了，而是SCSS里的url()根本不走Vite的模块解析链——它只是原样输出字符串，浏览器按最终CSS文件位置去加载，和@/别名完全无关。
- Vite不支持
~@/这类写法，也不解析url()内的别名 - 静态资源优先放
public/目录，用绝对路径：url('/logo.png') - 需要哈希或动态管理的资源，改用JS导入：
import logoUrl from '@/assets/logo.png'，再通过:style或CSS-in-JS注入 - 若坚持用SCSS变量统一路径，定义
$logo-url: "/assets/logo.png";，再background: url(#{$logo-url});
path.resolve生成绝对路径 → additionalData注入 → SCSS编译器加载。任何一个环节断开，变量就消失，而且往往不报错，只静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
