postcss本身不处理@import，必须由postcss-import在构建时展开并置于插件链首位，否则浏览器runtime加载阻塞渲染，且后续autoprefixer、cssnano等插件均失效；路径须完全一致才能去重，多级引入仅为开发组织而非性能优化。
PostCSS 本身不自动优化引入的 CSS，必须靠 postcss-import 插件在构建时展开 @import，再由后续插件（如 autoprefixer、cssnano）处理合并后的完整样式树——否则所有 @import 都原样输出，浏览器 runtime 加载、阻塞渲染，且前缀、压缩、嵌套等一概失效。
postcss-import 必须放在插件链最前面
它负责解析路径、去重、读取内容并内联；后续插件（postcss-nesting、autoprefixer）才能基于完整 AST 工作。顺序错会导致：
-
@layer或&嵌套语法被当成普通字符，直接失效 -
autoprefixer看到的是未展开的@import "reset.css"，不加任何前缀 - 别名路径（如
@import "@styles/vars.css"）无法被 resolve
正确顺序示例（postcss.config.js）：
module.exports = {
plugins: [
require('postcss-import')(), // 第一个
require('postcss-nesting')(),
require('autoprefixer')(),
require('cssnano')()
]
}
@import 路径必须标准化，否则重复加载
postcss-import 默认启用 skipDuplicates: true，但只对**完全一致的字符串路径**生效。以下写法会被视为两个文件：
-
@import "./vars.css"vs@import "src/vars.css" -
@import "~styles/vars.css"vs@import "src/styles/vars.css"
解决方法：
- 统一用相对路径（推荐），所有
@import都以当前文件为基准 - 若用别名，必须配
resolve钩子返回绝对路径，不能只改字符串 - 避免混用
~、@/、src/多种前缀风格
确保被 import 的文件也进 PostCSS 流程
关键不是“怎么让 @import 加前缀”，而是“怎么让被 @import 的文件也进这个流程”。常见漏点：
- Webpack 中：
css-loader默认不把@import内容传给后续 loader，必须显式设importLoaders: 1 - Vite：默认支持同级
.css间@import，但引入.scss、../node_modules/xxx/index.css等路径可能跳过 PostCSS - Vue 单文件组件：
<style></style>块内的@import不触发 PostCSS，除非声明lang="postcss"或该文件被识别为 PostCSS 源
cssnano 压缩前必须先完成 import 展开
cssnano 在单个 AST 上做去重和合并，如果 @import 还没展开，它就看不到跨文件冗余，压缩效果大打折扣。所以顺序必须是：
-
postcss-import→autoprefixer→cssnano -
autoprefixer必须在cssnano前，否则display: grid等新语法没加前缀就被删了 - 若用
cssnano@4，会报TypeError: plugin is not a function，必须升级到 v5+（require('cssnano')即可，无需传preset）
多级 @import 不是运行时优化手段，它只是开发期组织方式——最终仍生成一个 render-blocking 的大文件。真正要优化首屏，得靠打包器拆 chunk 或内联 critical CSS，而不是靠 import 合并。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
