CSS 预处理器支持

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

安装预处理器

# Sass
npm add -D sass

# Less
npm add -D less

# Stylus
npm add -D stylus

导入预处理器文件

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

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

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

Sass 使用示例

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

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

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

Less 使用示例

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

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

预处理器对比

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

CSS Modules + 预处理器

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

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

配置选项

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

要点总结

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