如何在 Vite 中配置 CSS 预处理器？一、核心前提 Vite 本身内置了对 CSS 预处理器的解析能力，无需额外安

一、核心前提

Vite 本身内置了对 CSS 预处理器的解析能力，无需额外安装解析插件，只需要安装对应的预处理器依赖即可。

二、不同预处理器的配置步骤

1. Sass/Scss（最常用）

Sass 有两种语法：.scss（带花括号，更接近 CSS）和 .sass（缩进式），Vite 都支持。

步骤 1：安装依赖

bash

运行

# npm
npm install -D sass

# yarn
yarn add -D sass

# pnpm (推荐)
pnpm add -D sass

步骤 2：直接使用（无需额外配置）

创建 .scss 文件（如 src/style/index.scss）：

scss

$primary-color: #1890ff; // 定义变量

.app-container {
  background: $primary-color;
  .title {
    font-size: 20px;
    font-weight: bold;
  }
}

在 React 组件中导入：

jsx

import React from 'react';
import './style/index.scss'; // 直接导入

function App() {
  return (
    <div className="app-container">
      <h1 className="title">Hello Vite + Sass</h1>
    </div>
  );
}

export default App;

2. Less

步骤 1：安装依赖

bash

运行

# npm
npm install -D less

# yarn
yarn add -D less

# pnpm
pnpm add -D less

步骤 2：使用（无需配置）

创建 .less 文件（如 src/style/index.less）：

less

@primary-color: #1890ff;

.app-container {
  background: @primary-color;
  .title {
    font-size: 20px;
    font-weight: bold;
  }
}

在组件中导入：

jsx
```
import './style/index.less';
```

3. Stylus

步骤 1：安装依赖

bash

运行

# npm
npm install -D stylus

# yarn
yarn add -D stylus

# pnpm
pnpm add -D stylus

步骤 2：使用（无需配置）

创建 .styl 文件（如 src/style/index.styl）：

stylus

primary-color = #1890ff

.app-container
  background primary-color
  .title
    font-size 20px
    font-weight bold

在组件中导入：

jsx
```
import './style/index.styl';
```

三、进阶配置（自定义预处理器选项）

如果需要自定义预处理器的编译行为（比如全局注入变量、修改解析选项），可以在 vite.config.js 中配置 css.preprocessorOptions：

完整配置示例

javascript

运行

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  css: {
    // 预处理器全局配置
    preprocessorOptions: {
      // 配置 Scss/Sass
      scss: {
        // 全局注入变量/混合器（无需在每个文件手动导入）
        additionalData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `,
        // 关闭废弃语法警告（可选）
        quietDeps: true
      },
      // 配置 Less
      less: {
        // 全局注入 Less 变量
        additionalData: `@import "@/styles/variables.less";`,
        // Less 编译选项（比如启用内联 JavaScript）
        javascriptEnabled: true
      },
      // 配置 Stylus
      stylus: {
        // 全局注入 Stylus 变量
        additionalData: `@import "@/styles/variables.styl"`
      }
    },
    // 其他 CSS 配置（可选）
    modules: {
      // 自定义 CSS Modules 类名格式
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    },
    // 启用 CSS 源码映射（开发环境推荐）
    devSourcemap: true
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 配合路径别名使用
    }
  }
});

关键配置解释

additionalData：全局注入公共的变量 / 混合器文件，避免在每个组件样式文件中重复 @import。
javascriptEnabled（Less 专属）：允许 Less 中使用内联 JavaScript（比如 @width: unit(100 / 2, px);）。
css.modules：自定义 CSS Modules 的类名生成规则，解决样式冲突问题。
devSourcemap：开发环境生成 CSS SourceMap，方便调试样式问题。

四、常见问题解决

安装依赖后报错「找不到预处理器」：
- 确认依赖安装成功（检查 package.json 的 devDependencies）。
- 重启 Vite 开发服务器（npm run dev），Vite 不会热更新依赖安装。
全局注入的变量文件路径报错：
- 确保 vite.config.js 中配置了路径别名（@），或使用绝对路径 / 相对路径。
- 示例：additionalData: '@import "./src/styles/variables.scss";'（相对路径）。
CSS Modules 不生效：
- 将样式文件命名为 .module.scss/.module.less（如 App.module.scss）。
- 导入方式：import styles from './App.module.scss'，使用：<div className={styles.container}>。

总结

基础使用：只需安装对应预处理器依赖（sass/less/stylus），即可直接使用 .scss/.less/.styl 文件，无需额外配置。
进阶配置：通过 vite.config.js 的 css.preprocessorOptions 可全局注入变量、自定义编译规则，提升开发效率。
关键技巧：结合路径别名和 additionalData 全局注入公共样式文件，避免重复导入；开发环境开启 devSourcemap 方便调试。