Vite配置Sass全局变量方法
2026-04-26 08:19:33
0浏览
收藏
本文深入解析了在 Vite 项目中通过 `css.preprocessorOptions.sass.additionalData` 安全、高效注入 Sass 全局变量的核心技巧，强调其相比手动引入更可靠——能统一前置拼接 SCSS 代码，确保所有组件（含 scoped 样式）无感知访问变量，且不污染作用域；同时厘清了 `@use` 与 `@import` 的选型权衡、路径规范、常见编译陷阱（如换行缺失、mixin 调用失效、调试语句干扰），并给出性能优化建议：仅将高频基础常量（如颜色、断点）放入 `additionalData`，其余逻辑按需模块化引入，兼顾构建速度与团队协作可维护性。
为什么 additionalData 是注入 Sass 全局变量最稳妥的方式
直接在 vite.config.ts 里用 css.preprocessorOptions.sass.additionalData 注入 @use 或 @import，比手动在每个 .vue 文件顶部写
