17370845950

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 当作一等公民来对待。