必须选用postcss-nesting（原生@nest语法）或postcss-nested（Sass风格隐式嵌套）之一，二者不兼容且不可共存；选错会导致编译失败或静默跳过，需严格区分语法、卸载冲突插件并按规范配置顺序。
postcss-nesting 和 postcss-nested 是两套不兼容的实现，选错就直接编译失败。必须明确：你要的是 W3C 原生 @nest 语法（如 .card { @nest & .title { color: blue; } }），还是 Sass 风格的隐式嵌套（如 .card { .title { color: blue; } }）。二者不能共存，配置顺序也完全不同。
确认你用的是 postcss-nesting 还是 postcss-nested
这是最容易卡住的第一步：postcss-nesting 实现的是 CSSWG 提案中的原生 @nest 规则；postcss-nested 模拟的是 Sass 语法，不依赖 @nest 关键字。
两者源码 AST 处理逻辑冲突，同时加载会报 TypeError: Cannot read property 'type' of undefined 或静默跳过嵌套。
检查你的 package.json 依赖项，只保留其中一个：
• 要原生语法 → 卸载 postcss-nested，装 postcss-nesting
• 要 Sass 风格 → 卸载 postcss-nesting，装 postcss-nested
别试图“都装上再挑着用”——PostCSS 插件链是线性执行的，没条件分支。
postcss-nesting 的最小可行配置
postcss-nesting 对插件顺序不敏感，但它要求宿主 PostCSS 版本 ≥ 8.4，且不能和 postcss-preset-env 的 nesting: true 同时启用——后者底层就是 postcss-nesting，重复加载会触发重复注册错误。
正确写法是：
• 安装：npm install --save-dev postcss-nesting
• postcss.config.js 中只写这一行插件：require('postcss-nesting')
• 不要加 postcss-preset-env，也不要设 { nesting: true } 选项
• 如果你已用 postcss-preset-env，删掉它的 nesting 字段，改用单独的 postcss-nesting 插件
postcss-nested 必须严格排在 autoprefixer 之前
如果你选的是 postcss-nested（Sass 风格），顺序就是硬性约束：
• postcss-import 必须第一（否则 @import 进来的嵌套内容看不到）
• postcss-nested 必须第二（它要把 .btn:hover 这种嵌套展开成独立规则）
• autoprefixer 必须最后（它只处理已展开的选择器，比如给 :hover 加 -webkit-）
错一个位置，就会出现两种典型现象：
• 编译后 CSS 里还留着 .card { .title { ... } } —— 说明 postcss-nested 没跑起来
• 报 Unknown word 错误 —— 说明 autoprefixer 提前读到了未展开的嵌套结构
Webpack/Vite 中漏了 postcss-loader 就等于没配
插件配置再对，构建工具没把 CSS 文件喂给 PostCSS，一切白搭。
Webpack：确保 module.rules 里 css-loader 后面紧跟着 postcss-loader，且 postcss-loader 的 options.plugins 不要覆盖 postcss.config.js（留空或设为 undefined）
Vite：默认已集成 PostCSS，但如果你手动改过 vite.config.ts 里的 css.postcss，注意不要把 plugins 数组写死，否则会绕过 postcss.config.js
验证方法：临时在 postcss.config.js 里加个 console.log('postcss running')，跑一次构建，看有没有输出
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是语法本身，而是插件之间那几毫秒的执行时序和 AST 节点状态。一个@import 没被提前合并，整个嵌套树就塌一半；一个 autoprefixer 插在前面，连错误都不报，只默默跳过。动手前先确认你到底要哪套语义，再锁死插件版本和顺序。 
