Vite中@import不合并CSS，是因为默认未启用postcss-import插件，需手动安装并配置在postcss.config.js中，且路径必须正确指定（如path选项），否则Vite仅作普通资源加载而不走PostCSS解析链。
直接用 postcss-import 就行，但默认不生效 —— 因为 Vite 2.0+ 已移除对它的自动支持，必须手动配置插件。
为什么 @import 在 Vite 里不合并 CSS？
Vite 默认只处理单文件作用域的 @import（比如 @import './vars.css'），但不会像 Webpack 那样调用 postcss-import 做路径解析、去重、内联合并。它把 .css 文件当普通资源加载，跳过了 PostCSS 的 import 插件链。
- 典型现象：
@import 'normalize.css';报错Cannot resolve module或静默失效 - 根本原因：Vite 的 CSS 处理流程中，
postcss-import没被启用，也没传入resolve上下文 - 不是 PostCSS 版本问题，而是 Vite 没把它纳入 transform pipeline
如何正确安装并配置 postcss-import？
需要显式安装插件，并在 postcss.config.js 中声明，同时确保 Vite 的 CSS 预处理器选项启用 PostCSS 支持。
- 运行
npm install -D postcss-import（或yarn add -D postcss-import） - 创建
postcss.config.js，内容必须导出对象（不能是函数）：
module.exports = {
plugins: {
'postcss-import': {},
// 其他插件如 autoprefixer 可继续加在这里
}
}
- Vite 不读取
postcss.config.cjs或.postcssrc，只认postcss.config.js - 如果用了
css.preprocessorOptions.postcss配置，会覆盖默认行为，反而让postcss-import失效
路径解析和别名怎么写才有效？
postcss-import 默认只从 node_modules 和当前 CSS 文件所在目录查找，不识别 Vite 的 @/ 别名或 resolve.alias。
立即学习“前端免费学习笔记（深入）”；
- 要导入
src/assets/css/base.css，得写@import '../assets/css/base.css';（相对路径） - 想用别名，必须在
postcss.config.js中显式传入path选项：
const path = require('path')
module.exports = {
plugins: {
'postcss-import': {
path: [path.resolve(__dirname, 'src/assets/css')]
}
}
}
- 这样就能在任意 CSS 里写
@import 'base.css';，无需相对路径 - 注意：这个
path是 Node 路径，不是 Vite 的运行时别名，不能写@/assets/css
合并后样式顺序和重复导入怎么控制？
postcss-import 会自动去重（基于文件绝对路径），但顺序由 @import 出现位置决定 —— 它不是“全部收集再排序”，而是边解析边内联。
- 多个
@import按代码顺序依次展开，类似预处理器的include - 如果 A.css 导入 B.css，B.css 又导入 C.css，最终生成的 CSS 就是 A → B → C 的线性拼接
- 没有全局 scope 控制；变量、自定义属性（
:root）仍需靠 CSS 级联规则，postcss-import不做作用域隔离 - 慎用
@import导入含@layer的文件 —— 层级可能被意外打乱
真正麻烦的是路径和别名映射，不是插件本身。很多人卡在 postcss.config.js 文件名写错，或者误以为 Vite 会自动桥接 resolve.alias。只要路径配置对了，@import 就能像在传统构建工具里一样工作。
