Vue3配Sass只需装sass并配置additionalData注入全局变量；Vite内置Dart Sass，禁用sass-loader；@import用于变量平铺，@use需命名空间；生产环境需显式设outputStyle和sourceMap。
Vue3项目里配Sass，核心就两件事：装对依赖、注入对路径。Vite项目比Webpack简单得多，但容易在sass-loader和additionalData写法上翻车。
用 Vite 时只装 sass，别碰 sass-loader
Vite 从 2.0 起内置了 Dart Sass 支持，sass-loader 不仅多余，还会和 Vite 的预处理器管道冲突，导致编译报错或变量不生效。
- 正确命令：
npm install sass -D或yarn add sass -D - 错误操作：执行
npm install sass sass-loader -D（尤其在 Vite 中） - 如果已误装
sass-loader，直接删掉：npm uninstall sass-loader
vite.config.ts 里用 css.preprocessorOptions.scss.additionalData 注入全局变量
这个配置项会把指定 SCSS 内容自动拼到每个 <style lang="scss"></style> 块开头，是共享变量/函数/mixin 的唯一可靠方式。
- 必须用
@import（不是@use）才能让变量直接可用；@use需要命名空间，组件内得写$primary-color→variables.$primary-color - 多个文件用分号分隔：
additionalData: '@import "@/styles/vars.scss"; @import "@/styles/mixins.scss";' - 路径别名
@在 Vite 中默认可用，不用额外配resolve.alias
组件内 <style lang="scss"></style> 的几个硬约束
SCSS 语法本身没问题，但 Vue 的 scoped 模式和编译时机会影响实际行为。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
-
scoped下，&和嵌套能用，但@import不能写在<style></style>里——它只在顶层 SCSS 文件中有效 - 想在单个组件里局部引入 mixin？只能用
@use+ 别名：@use "@/styles/mixins" as m;，然后@include m.flex-center; -
:export只对.module.scss有效，普通<style lang="scss"></style>不支持导出 JS 变量
生产环境要注意 outputStyle 和 sourceMap
Vite 默认不暴露这些选项，但如果你用 defineConfig 手动扩展 css.preprocessorOptions.scss，就得自己管。
-
outputStyle: 'compressed'必须显式设，否则生产包里 SCSS 编译后仍是 expanded 格式，体积多 30%+ -
sourceMap: false推荐关掉，生产环境不需要调试原始 SCSS 行号 - 别信“Vite 自动优化”，它只压缩 JS/CSS 字符串，不干预 SCSS 编译输出格式
最常被忽略的是 @import 和 @use 的语义差异：前者把变量平铺进作用域，后者强制隔离。选哪个不看喜好，看团队是否接受命名空间前缀。
