Vue3项目中如何配置Sass CSS预处理器教程

在 Vue3 中集成 Sass，其实不需要复杂配置：安装好 sass，再通过 additionalData 注入全局变量，通常就能满足大多数项目需求。由于 Vite 已经内置 Dart Sass 支持，因此无需额外启用 sass-loader；其中，@import 更适合直接引入并平铺全局变量，而

在 Vue3 中集成 Sass，其实不需要复杂配置：安装好 sass，再通过 additionalData 注入全局变量，通常就能满足大多数项目需求。由于 Vite 已经内置 Dart Sass 支持，因此无需额外启用 sass-loader；其中，@import 更适合直接引入并平铺全局变量，而 @use 则必须配合命名空间使用；到了生产环境，outputStyle 和 sourceMap 这两个选项也建议明确配置，不要省略。

如何在Vue3项目中配置CSS预处理器Sass

在 Vue3 项目中配置 Sass，关键主要有两步：依赖装对、全局路径注入正确。相比 Webpack，Vite 项目的配置明显更简洁，但很多开发者还是容易在sass-loader安装或additionalData写法上踩坑。

使用 Vite 时只安装 `sass`，不要再装 `sass-loader`

从 Vite 2.0 开始，官方就已经内置了 Dart Sass 能力，因此sass-loader在 Vite 项目里不仅没有必要，还有可能和 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` 注入全局变量

这个配置项的作用，是在每一个