在 vite 项目中配置 css 预处理，核心是安装对应的语言包并通过 import 语句引入样式文件。vite 基于 es modules 和 esbuild，无需像 webpack 那样配置复杂的 loader，只需确保安装了相应的依赖（如 sass、less 或 stylus），并在代码中直接引用即可生效。
如何安装并启用 Sass 预处理功能
要使用 Sass，首先需要安装 sass 包，然后在组件中通过 @import 或 import 引入 .scss 或 .sass 文件。Vite 会自动识别这些扩展名并使用内置的 esbuild 进行编译，无需额外配置 vite.config.js。
npm install sass -D
// main.js
import './styles/global.scss';
// styles/global.scss
$primary-color: #007bff;
body {
background-color: $primary-color;
}运行项目后，浏览器将看到背景色被正确解析为 #007bff。如果未安装 sass 包，Vite 会抛出模块解析错误。
立即学习“Java免费学习笔记（深入）”；
Less 和 Stylus 的配置方式有何不同
Less 和 Stylus 的配置逻辑与 Sass 完全一致，区别仅在于安装的包名和文件扩展名。安装 less 或 stylus 后，直接在代码中引入对应后缀的文件即可。Vite 对这三种预处理器均提供开箱即用的支持，配置复杂度为零。
npm install less stylus -D
// App.vue
<style lang="less">
@bg: #f0f0f0;
.container { background: @bg; }
</style>
<style lang="stylus">
.bg-stylus
background #e0e0e0
</style>上述代码展示了在同一项目中混合使用 Less 和 Stylus 的情况。Vite 会根据 lang 属性或文件扩展名自动调用对应的编译器。只要依赖已安装，任何语法错误都会在开发服务器启动时由编译器报错，而非运行时错误。
当 SCSS 变量未定义时会发生什么
如果在 .scss 文件中使用了未声明的变量，Sass 编译器会在构建阶段抛出错误，导致开发服务器无法启动或热更新失败。例如，引用一个名为 $undefined-var 的变量，控制台会显示 SassError: Undefined variable。这是静态分析的结果，意味着代码在运行前就被拦截了。
