CSS别名仅在JS/TS的import中生效，@import在<style>中不走模块解析系统，只认相对路径或绝对URL，故无法使用别名。
为什么 @import 在 <style> 里不能用别名引入 CSS
因为原生 CSS 的 @import 不走模块解析系统，它只认相对路径或绝对 URL。写 @import '@styles/base.css' 会被浏览器当作字面路径请求，最终 404。Vite 和 Vue 都不处理这种写法——不是 bug，是规范限制。
vite.config.ts 中配置 resolve.alias 是前提
别名生效必须靠 Vite 的模块解析链，CSS 文件得先被 import 进 JS/TS 才能触发别名替换。所以第一步是配对：
-
alias必须用path.resolve(__dirname, 'src')或等效写法，不能用./src - 推荐统一用
@styles指向src/styles，避免和@（指向src）语义重叠 - 如果项目有
tsconfig.json，记得同步加"@styles/*": ["src/styles/*"]，否则 TS 类型检查会报错
在 <script setup> 中 import 才真正生效
这是目前唯一可靠、可 HMR、可 Tree-shaking（若 CSS 支持按需导出）的方式：
-
import '@styles/reset.css'→ 正确，全局注入 -
import '@styles/components/Button.css'→ 正确，适合组件级样式隔离 - 不要写分号省略：
import '@styles/theme.css'后必须跟;，否则 Vite 编译报Unexpected token - 如果 CSS 里用了
url(./fonts/icon.woff)，路径是相对于该 CSS 文件本身，不是 .vue 文件
<style src=""> 写法的硬性限制
这个语法绕过模块系统，直接读文件内容，所以别名无效。但它适合零逻辑的纯样式抽离：
立即学习“前端免费学习笔记（深入）”；
-
<style src="./base.css" scoped></style>→ 可用，但路径是相对 .vue 文件的 - 一旦加了任何内联规则，比如
<style src="./base.css" scoped>.extra { color: red }</style>，.extra完全不会生效 - 移动 .vue 文件时，
src路径必须手动同步更新，IDE 不提示
<style> 里自由 @import，结果样式白写了还查不出原因。记住一点——CSS 别名只在 JS/TS 的 import 语句里起作用，其他地方都是假象。 
