vite中的css处理

开箱即用能力

Vite 对 CSS 支持非常友好，常见场景几乎零配置：

• 直接导入 .css
• 支持 CSS Modules（.module.css）
• 支持 Sass/Less/Stylus（安装对应预处理器即可）
• 支持 PostCSS（自动读取配置）

普通 CSS

import "./style.css";

开发阶段会走 HMR（热更新），修改样式基本是秒级生效。

CSS Modules

文件命名：index.module.css

.title {
  color: #42b983;
}

import styles from "./index.module.css";

export default function App() {
  return <h1 className={styles.title}>vite css module</h1>;
}

使用 Less/Sass

以 Less 为例：

yarn add less -D

然后可直接写：

import "./index.less";

全局样式变量（以 scss 为例）

vite.config.js

import { defineConfig } from "vite";

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

这样每个 scss 文件都能直接使用全局变量。

小结

Vite 的 CSS 方案核心就是一句话：
能约定就约定，能默认就默认，尽量不让你为样式配置花时间。