postcss-import必须排在PostCSS插件列表第一位，因为PostCSS线性处理CSS内容流，它需先将@import语句替换为实际文件内容，否则autoprefixer等后续插件只能处理原始字符串，导致样式丢失、前缀缺失等问题。
postcss-import 必须放在 PostCSS 插件列表第一位，否则 @import 语句根本不会被展开，后续插件看到的只是原始字符串。
为什么 postcss-import 必须排在插件最前面
PostCSS 是线性处理 CSS 内容流的，postcss-import 的作用是把 @import "foo.css" 替换成对应文件的实际内容。如果它不在最前，autoprefixer、cssnano 等插件处理的还是未展开的导入语句——比如 autoprefixer 不会给子模块里的 display: flex 加前缀，cssnano 可能误删“空规则”。
常见错误现象包括：构建后样式丢失、:hover 失效、flex 没有厂商前缀。
- 正确顺序示例：
[postcss-import, autoprefixer, cssnano] - 错误顺序示例：
[autoprefixer, postcss-import]——autoprefixer完全没机会处理子模块规则 - Webpack 用户注意：
postcss-loader的options.plugins数组要手动保证顺序，别依赖配置文件导出顺序
@import 路径写法与 “Cannot resolve file” 错误
90% 的路径错误不是插件没装好，而是 postcss-import 不知道从哪开始算“相对”。它只认两个基准：当前被处理文件的目录（由 from 参数指定） 和 node_modules。
立即学习“前端免费学习笔记（深入）”；
- 你在
src/styles/index.css里写@import "./base/reset.css"，基准就是src/styles/ - 写
@import "normalize.css"，会自动去node_modules/normalize.css/normalize.css找 - 别写
@import "../base/reset.css"，除非你确认from传的是src/styles/index.css，否则基准错位 -
@import不支持 glob：@import "components/*.css"直接报错；想批量导入，得先建components/index.css，再在里面逐个@import
统一入口文件怎么组织才不翻车
所谓“统一入口”，本质是让所有样式最终都从一个根文件（如 src/styles/index.css）单点引入，再由它逐级 @import 子模块。这不是魔法，而是靠人维护 import 树的完整性。
- 入口文件里别写实际样式规则，只做
@import，否则容易和子模块逻辑耦合 - 避免深层嵌套 import（比如 A → B → C → D），超过 3 层就难调试；
postcss-import不报错，但 source map 会失真，devtools 里定位不到原始位置 - 如果用 CSS Modules，
postcss-import默认不处理模块化后的类名，需配合postcss-modules，且二者顺序不能错：import → modules -
@import路径默认只识别.css，若要导入.pcss或.scss，得配extensions选项——但它只管后缀识别，不负责编译
合并后压缩阶段容易忽略的坑
很多项目配了 cssnano 却发现压缩后样式异常，问题常出在默认启用的破坏性优化上。
-
discardDuplicates会删掉重复规则，但如果两个.btn { color: red; }分别来自不同组件库，删掉就丢样式了 -
mergeLonghand会把margin-top: 10px; margin-bottom: 10px;合成margin: 10px 0;，但某些旧版 Android WebView 对简写支持不一致 - 别在
postcss.config.js里用env === 'production'条件启用cssnano——css-minimizer-webpack-plugin自己已集成，重复启用会导致双重压缩、calc()被错误折叠、自定义属性丢失 - 加
postcss-reporter输出处理日志，尤其关注 “Removed X duplicate rules” 这类提示
真正卡住效果的，从来不是插件有没有装，而是你有没有意识到：@import 的路径解析、插件执行顺序、压缩策略这三者之间存在强耦合——漏掉任一环，打包出来的 CSS 就可能看起来“对”，但运行时行为不对。
