Vite 默认支持现代 CSS 工作流，无需手动配置 loader；安装对应预处理器（如 sass、less、stylus）即可直接 import 使用，CSS 模块化、PostCSS、Tailwind 等按需集成，避免过度配置。
用 Vite 集成 CSS 处理链，其实不难——它默认就支持现代 CSS 工作流，关键在于理清“写什么”和“怎么配”的关系。
开箱即用的 CSS 支持
Vite 原生支持 .css、.scss、.sass、.less、.styl 等格式，无需手动配置 loader。只要安装对应预处理器，就能直接 import 使用：
- 安装 Sass：
npm add -D sass，然后@import './style.scss'就生效 - Less 同理：
npm add -D less - Stylus：
npm add -D stylus
不需要 webpack 的 rules、loaders、plugins 堆叠配置，Vite 内部已封装好转换逻辑。
按需启用 CSS 功能模块
多数项目不需要全量 CSS 工具链。建议分场景加装：
立即学习“前端免费学习笔记（深入）”；
-
CSS 变量 + 嵌套 + 未来语法 → 安装
postcss+postcss-preset-env，在postcss.config.js中启用 -
自动加前缀 →
autoprefixer加到 PostCSS 插件里，配合browserslist配置目标环境 -
CSS 模块化（避免全局污染） → 直接用
Component.module.css，Vite 默认识别并生成哈希类名 -
Tailwind CSS → 运行官方初始化命令
npm install -D tailwindcss postcss autoprefixer+npx tailwindcss init -p，再引入@tailwind指令即可
避免过度配置的三个提醒
很多人卡在“想一步到位配齐所有 CSS 能力”，结果反而出错：
- 别急着配 PostCSS 插件 —— 先确认是否真需要嵌套、自定义属性回退、媒体查询简化等功能
- 别手动写
build.rollupOptions.plugins处理 CSS —— Vite 的build.cssCodeSplit、build.cssMinify已覆盖基础构建需求 - 开发时不用管 source map —— Vite 默认为 CSS 生成准确的 sourcemap，调试样式直接定位到源文件行号
一键优化：从零开始的最小可行 CSS 流程
新建一个 Vite 项目后，三步走通 CSS 链路：
- 执行
npm create vite@latest my-app -- --template react（或其他框架） - 进项目，安装预处理器（如
npm add -D sass），创建src/App.module.scss并在组件中导入 - 需要全局样式？在
main.tsx或main.js里import './index.scss'即可
没有构建配置文件要改，没有插件要注册，没有 loader 要声明 —— Vite 把 CSS 当作一等公民来对待。
