postcss-import必须置于postcss插件列表首位，仅静态内联@import文件，不编译语法；位置靠后会导致autoprefixer等插件处理未解析的原始@import而报错，如“cannot resolve file”。
postcss-import 必须放在插件列表最前面
它不负责编译语法，只做静态内联；如果位置靠后，autoprefixer、tailwindcss/nesting 等插件会先处理原始 @import 语句，导致路径未解析就报错或被忽略。
常见错误现象：Cannot resolve file "./base.css"，但文件明明存在——其实是 postcss-import 根本没执行，后续插件把 @import 当普通声明跳过了。
- 正确配置示例（
postcss.config.js）：
module.exports = {
plugins: [
require('postcss-import'), // 必须第一
require('autoprefixer'),
require('cssnano') // 注意：别和 webpack 的 css-minimizer-webpack-plugin 双重启用
]
}
- 它只识别字面量路径：
@import "base.css"✅，@import url("base.css")❌，@import "base/" + $theme + ".css"❌（PostCSS 不做变量计算） - 默认只处理
.css和.pcss，要支持.sss得加extensions: ['.css', '.pcss', '.sss']，但注意：它不编译，只是读文件内容
入口 CSS 文件必须显式写满所有 @import
PostCSS 不扫描项目目录自动合并，它只按你写的 @import 顺序展开。所谓“合并所有”，实际是你人工维护一棵 import 树的根节点。
容易踩的坑是：在 JS 里零散 import './Button.css'，又在 HTML 里手动加 <link rel="stylesheet">，结果构建工具没感知到依赖，postcss-import 完全不处理这些文件。
- 推荐做法：只保留一个入口，比如
src/styles/index.css，里面只写@import，不写任何样式规则 - 路径基准是「被 import 的文件」，不是入口文件。例如
A.css里写@import "../reset.css"，解析时以A.css所在目录为起点 - 避免嵌套超过 3 层（A → B → C → D），否则 source map 定位失真，devtools 里点不到原始行号
合并后层叠顺序由 import 顺序决定，不是文件加载顺序
postcss-import 是同步展开的，最终输出顺序 = 最深叶子节点 → 父节点 → 入口文件。也就是说，B.css 里 @import "C.css"，那么 C.css 的规则一定出现在 B.css 规则之前。
这和浏览器运行时的 <link> 加载顺序完全不同，容易误判优先级。比如 hover 失效、!important 没起作用，八成是合并后规则物理位置反了。
- 检查方法：构建后打开输出的 CSS 文件，搜索关键选择器，看它们实际出现的位置
- 通用顺序建议：reset → base → components → layout → theme，越基础的越靠前
- 禁用
cssnano的mergeLonghand，某些 Android WebView 对margin: 10px 0解析异常，而margin-top: 10px是安全的
构建工具链里别让 postcss-import 和其他合并机制打架
Webpack 的 MiniCssExtractPlugin、Vite 的 CSS 自动 dedupe、甚至 Meteor 的 standard-minifier-css，本身就有资源去重逻辑。如果同时启用 postcss-import，可能重复合并或路径解析冲突。
典型症状：构建日志里出现两遍 Removed X duplicate rules，或者输出 CSS 里某段样式莫名消失。
- Webpack 场景下，应关闭
css-loader的importLoaders对@import的处理，只留给postcss-import - Vite 默认已做 dedupe，若还配
postcss-import，需确保没在index.html里手动加<link>，否则运行时多一次请求 - 使用
postcss-reporter输出日志，重点关注 “Inlined import from ./xxx.css” 是否覆盖全部预期文件
真正难的不是“怎么让文件变少”，而是确保合并后的层叠逻辑、路径解析、source map 映射全都可追溯——这些细节在压缩后几乎无法调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
