PostCSS本身不合并文件，需依赖插件（如postcss-import）或构建工具（如Webpack、Rollup）实现；其核心职责是转换单个CSS字符串，而非打包。
PostCSS本身不合并文件，得靠插件或构建工具配合
PostCSS不是打包器，它只处理单个CSS字符串。所谓“合并样式文件”，实际是构建流程中把多个CSS源文件读入、转换、再拼接输出——postcss-import干的是这件事，但它默认只做@import内联，不自动收集散落的入口文件。
常见错误现象：postcss-cli -c postcss.config.js src/*.css -o dist/bundle.css看似能打包，但若某个src/a.css里有@import "./b.css"，而b.css没被glob匹配到，它就不会进最终输出——因为postcss-cli只把匹配到的文件当入口，其余靠postcss-import按需加载，但加载路径解析失败就静默跳过。
- 使用场景：多组件CSS分散开发、主题样式拆分、第三方UI库局部引入
- 必须确保
postcss-import配置path包含所有可能被@import引用的目录，比如{ path: ["src/css", "node_modules"] } - 如果想无
@import声明也强制合并（如把reset.css+main.css+theme.css全塞进一个输出），就得换用rollup-plugin-postcss或esbuild等真正支持多入口的工具
postcss-import的@import行为和Webpack/ESBuild不兼容时的表现
postcss-import在Node环境下解析@import路径，不走模块解析逻辑。遇到@import "antd/es/button/style/css"这种ESM路径写法，会直接报错Cannot resolve import——它不认识package.json#exports或node_modules/antd/es/...这种结构。
性能影响：启用resolve选项（如配alias）可缓解，但每次@import都会触发一次文件系统读取，大量嵌套导入会让PostCSS处理变慢；而Webpack的css-loader已缓存模块，后续复用快得多。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：开发期用Webpack/Vite处理样式合并，PostCSS只专注转换（autoprefixer、tailwind等）
- 若坚持纯PostCSS流程，把第三方样式先用
cp node_modules/xxx/dist/xxx.css ./src/vendor/拷出来再@import "./vendor/xxx.css" - 别依赖
postcss-import去解析~别名，它不认resolve.alias，得手动配path或改用postcss-url配合
合并后CSS体积暴增？检查source map和重复规则注入
多个文件都用了@tailwind base或@layer base，postcss-import会原样展开，导致重置样式重复出现三次。更隐蔽的是，某些PostCSS插件（如cssnano）默认开启mergeLonghand，但在跨文件合并后，它可能把不同文件里的margin: 0和margin-top: 1rem误判为可合并，反而破坏预期布局。
容易踩的坑：cssnano的preset: "default"在PostCSS 8+下默认启用duplicateRules，但它无法识别“逻辑上相同但来自不同文件”的规则，结果既不删也不报警，只留冗余代码。
- 实操建议：在
postcss.config.js里显式关掉cssnano的duplicateRules和mergeLonghand - 用
precss或postcss-preset-env替代部分@import，它们对作用域更敏感，不易重复注入 - 上线前跑一遍
npx purgecss --css dist/bundle.css --content "dist/*.html" --out dist/purged/，比依赖PostCSS插件更可控
PostCSS合并≠减少HTTP请求数，关键看部署方式
很多人以为“合并成一个CSS文件”就能提升加载性能，但现代浏览器对HTTP/2多路复用很友好，单个大文件反而阻塞渲染更久——特别是当bundle.css里混着首屏无关的模态框、打印样式时，浏览器得下载并解析全部才开始绘制。
真正影响性能的是关键CSS提取和加载时机。PostCSS插件本身不提供media="print"分离、data-attribute条件加载这些能力，得靠构建工具在合并前切片。
- 正确姿势：用
critters（Vite插件）或critical（CLI）从合并后的CSS里抠出首屏样式，内联到<head>；其余异步加载 - 别把所有主题CSS全合并进主包，用
@custom-media或CSS变量控制开关，运行时切换更轻量 - CDN缓存策略比文件合并更重要：确保
bundle.css?ver=20240520这类带哈希的URL能被强缓存，否则合并只是白忙
合并样式这件事，难点不在PostCSS怎么配，而在理清“哪些该合、哪些该分、什么时候合、谁来负责合”。工具链越往后走，越要警惕把构建逻辑错当成样式逻辑来解。
