CSS 预处理器支持

Vite 开箱支持主流 CSS 预处理器，只需安装对应依赖即可使用。

安装预处理器

Bash

# Sass
npm add -D sass

# Less
npm add -D less

# Stylus
npm add -D stylus

导入预处理器文件

JavaScript

// 导入 Sass
import './styles/main.scss'

// 导入 Less
import './styles/main.less'

// 导入 Stylus
import './styles/main.styl'

Sass 使用示例

scss

// variables.scss
$primary-color: #3498db;
$font-size: 14px;

// main.scss
@use './variables.scss';

.button {
  color: variables.$primary-color;
  font-size: variables.$font-size;
}

Less 使用示例

less

// variables.less
@primary-color: #3498db;
@font-size: 14px;

// main.less
.button {
  color: @primary-color;
  font-size: @font-size;
}

预处理器对比

预处理器	后缀	安装包	特点
Sass	.scss/.sass	sass	生态最成熟
Less	.less	less	配置简单
Stylus	.styl	stylus	语法灵活

注意：安装对应依赖后 Vite 自动识别文件后缀并编译。

CSS Modules + 预处理器

JavaScript

// Sass CSS Modules
import styles from './Button.module.scss'

// Less CSS Modules
import styles from './Button.module.less'

配置选项

JavaScript

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables.scss" as *;`
      }
    }
  }
})

要点总结

安装 sass/less/stylus 依赖即可使用
直接导入 .scss/.less/.styl 文件
支持预处理器 + CSS Modules 组合
可配置全局变量自动注入