@/ 别名的三处配置：Vite、TypeScript 与 SCSS 缺一不可

「不要写 ../../..」这条规矩很容易说出口，难的是让它在三种工具链里同时成立。这个站用 @/ 指向 src，配置分散在三处，各自管一段流水线。

三处分别管什么

• astro.config.mjs 的 vite.resolve.alias：管打包与 dev 的模块解析。
• tsconfig.json 的 paths：管编辑器补全与 astro check 的类型解析。
• SCSS 的 loadPaths：管样式里 @use 的路径解析。

三者是三条独立的解析链，谁也不读谁的配置。

少配一处的症状

只配 Vite：编辑器里 @/components/X.astro 标红，但构建能过。只配 tsconfig：编辑器开心了，构建报找不到模块。漏掉 loadPaths：样式里 @use 'styles/settings/tokens' 直接 File not found。

三种症状都不像同一个原因，所以这张表格比记忆可靠。

为什么样式里不写 @/

SCSS 的 @use 不走 Vite 的 alias，只认 loadPaths。所以样式内部统一写成根路径形式：

@use 'styles/settings/tokens';

它和 @/ 是同一个目标的两种写法，但必须按各自的工具链来写，不能互相代替。

两处必须写相对路径的例外

import.meta.glob 是构建期静态分析：Vite 要求字面量路径，别名不生效，模式也不能放进变量。所以 lib/registry.ts 与 lib/mount.ts 里的应用注册表是全项目仅有的两处相对路径，这是框架限制，不是疏忽。

收益

移动文件时不用改 import 语句；@/ 一眼能和第三方包区分开；层级深度不再影响可读性。代价只是这三处要一起改——换目录结构时容易漏。