postcss-import必须排在postcss插件列表第一位，因为它负责将@import语句替换为实际文件内容；若位置靠后，后续插件（如autoprefixer、cssnano）只能处理未展开的导入语句，导致样式丢失、前缀缺失等问题。
必须用 postcss-import 插件，且它得排在 PostCSS 插件列表第一位，否则其他插件（比如 autoprefixer）根本看不到展开后的样式内容。
为什么 postcss-import 必须放在插件最前面
PostCSS 是线性处理 CSS 内容流的，postcss-import 的作用是把 @import 语句替换成对应文件的实际内容。如果它不在最前，后续插件看到的还是原始的 @import "foo.css" 字符串——比如 autoprefixer 不会去给未展开的导入加前缀，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，想导入 src/styles/base/reset.css。
- 在
index.css里写@import "./base/reset.css";—— 基准是index.css所在目录，即src/styles/ - 写
@import "normalize.css";—— 会自动去node_modules/normalize.css/normalize.css找 - 别写
@import "../base/reset.css"，除非你确认index.css的from路径传的是src/styles/index.css，否则基准错位 - 不支持 glob，
@import "components/*.css"直接报错；想批量导入，得写个components/index.css，再在里面逐个@import
怎样统一入口又不搞乱源码结构
所谓“统一入口”，就是让所有样式最终都从一个根文件（如 src/styles/index.css）单点引入，但这个文件本身不写具体样式规则，只做 @import 中转。
容易踩的坑：嵌套太深、source map 错位、调试时找不到原始位置。
- 入口文件只保留
@import，不写任何选择器或声明 - 层级控制在 3 层以内：入口 → 组块（base/layout/components）→ 具体模块，避免 A → B → C → D
- 如果用了 CSS Modules，
postcss-import和postcss-modules顺序不能错：import必须在modules之前，否则模块化逻辑无法作用到子文件 - 扩展名要配对：默认只识别
.css，若用.pcss，得在插件选项里加extensions: [".pcss"]，但注意它不编译语法，只是让@import能认出后缀
合并后为什么层叠顺序不对、!important 生效异常
postcss-import 是按 @import 语句出现顺序同步展开的，但最终输出顺序取决于“被导入文件内部是否还有 @import”。比如 A.css 导入 B.css，B.css 又导入 C.css，那实际产出是 C → B → A，而不是 A → B → C。
这和 Webpack 的 import 顺序不同，也和浏览器原生 @import 的异步加载行为无关——这是构建期静态内联的结果。
- 不要依赖“写在后面就覆盖前面”，显式控制顺序：把重置样式放最前，基础工具类次之，组件样式最后
- 压缩阶段禁用
cssnano的discardDuplicates和mergeLonghand，前者可能误删同名但来源不同的规则，后者生成的简写在旧 WebView 上有兼容问题 - 上线前用
postcss-reporter看日志，重点检查 “Inlined X imports” 和 “Removed X duplicate rules” 这类提示
真正麻烦的不是合并动作本身，而是路径基准、插件顺序、嵌套深度这三者耦合在一起——改一处，另外两处很可能跟着出问题。动手前先确认 from 参数、插件数组顺序、以及每个 @import 的相对路径是否全部指向同一个逻辑基准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
