必须安装开发依赖sass并配置css.preprocessoroptions.sass.additionaldata，用相对路径@use "./src/styles/vars.scss" as *;实现全局变量注入，禁用@/别名和@import，且variables.scss仅含变量/混入/函数。
直接装 sass，配 css.preprocessorOptions.sass.additionalData，别碰 sass-loader 或 node-sass——它们要么已废弃，要么根本不需要。
为什么装了 sass 还报 Cannot find module 'sass'？
常见错误是只装了 sass 却没确认安装位置：它必须是开发依赖（-D），且不能被误装进 dependencies。Vite 只在构建时调用编译器，运行时不需要它。
- 正确命令：
pnpm add -D sass（推荐）或npm install -D sass - 错误写法：
npm install sass（没加-D，可能进错依赖区） - 验证是否生效：删掉
node_modules和pnpm-lock.yaml，重装后跑pnpm dev，看控制台是否还有Failed to resolve import或Cannot find module 'sass'
怎么让 _variables.scss 在所有 .scss 文件里自动可用？
additionalData 是唯一靠谱方式，但路径和语法容易翻车。
- 别用
@import "@/styles/vars.scss"：Vite 的@/别名在additionalData字符串里不解析，会报File to import not found - 正确写法（推荐）：
additionalData: '@use "./src/styles/vars.scss" as *;'—— 用相对路径 +@use（更安全，避免变量冲突） - 如果非要用
@import，路径得是./src/styles/vars.scss，且确保文件名带下划线（_vars.scss） - 注意：这个配置只对
.scss文件生效，.css或.vue里的<style lang="scss"></style>才走它
全局 reset.css / base.css 怎么引入才不重复、不遗漏？
additionalData 对纯 CSS 文件完全无效，硬塞进去等于白写。
- 全局 CSS 必须显式导入：在
main.ts或App.vue的顶层<style></style>里@import "@/styles/reset.css"; - 千万别在多个组件里各自
@import同一个 reset —— 构建后会被多次打包，导致样式重复或覆盖顺序错乱 - 如果用了 CSS Modules（如
Button.module.scss），它默认不继承全局变量，additionalData注入的变量也不会自动生效，得手动@use或改用普通.scss
构建后 @mixin 报 Undefined mixin 怎么办？
根本不是配置问题，是 SCSS 代码组织逻辑错了。
- Vite 构建阶段会把所有 SCSS 提取合并成单个 CSS 文件，但提取顺序不保证
@mixin定义一定在调用之前 - 解决办法只有一条：所有
@mixin、@function、$var必须集中在一个入口文件（比如src/styles/index.scss），再由它统一@use其他模块 - 组件级 SCSS 文件（如
Button.scss）只写选择器和规则，禁止定义任何可复用结构 - 别指望
css.codeSplit: false来“修复”——它只是禁用 CSS 拆分，代价是体积变大，且不解决本质问题
最容易被忽略的是：SCSS 全局变量注入和全局 CSS 加载是两套机制，混用就会失效；另外，@/ 别名在字符串里不工作这件事，90% 的人第一次都会踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
