最常见原因是同时安装postcss-nesting和postcss-nested或两者皆未安装：二者语法不兼容，共存会导致静默跳过嵌套或TypeError；Tailwind项目必须用tailwindcss/nesting且置于tailwindcss之前。
postcss.config.js 里没装对插件或装多了
最常见原因是同时装了 postcss-nesting 和 postcss-nested，或者根本没装——这两个插件语法不兼容，共存会导致静默跳过嵌套块，甚至报 TypeError: Cannot read property 'type' of undefined。
- 运行
npm list postcss-nesting postcss-nested，只保留一个：要原生@nest语法就留postcss-nesting@10+；要 Sass 风格（如.card { .title { }）就只留postcss-nested - 如果用的是 Tailwind，必须用
tailwindcss/nesting，且它得写在tailwindcss插件之前 - 删掉
postcss-preset-env的nesting: true配置项——它底层就是postcss-nesting，重复加载会注册冲突
PostCSS 插件顺序错位导致嵌套未展开
插件链是线性执行的，postcss-nesting 或 postcss-nested 必须在所有重写选择器的插件之前，否则它们压根看不到原始嵌套结构。
-
postcss-nested必须排在autoprefixer前面；否则你看到的输出里还带着.a { .b { color: red; } } -
postcss-nesting必须在tailwindcss、postcss-preset-env、cssnano之前；否则@nest & .btn被直接透传，浏览器当无效语法丢弃 - Vite 用户注意：
css.postcss.plugins是手动覆盖模式，必须显式写入require('postcss-nesting')，不能依赖自动发现
VSCode 语言模式没切到 PostCSS，误报语法错误
VSCode 报 “Unknown word” 或 “Unexpected token” 不代表构建失败，只是编辑器按 CSS 模式校验，而原生 CSS 标准根本不允许嵌套。这和浏览器兼容性无关，纯属语言识别错位。
- 打开文件后按
Ctrl+Shift+P→ 输入Change Language Mode→ 明确选PostCSS - 若列表里没有
PostCSS，说明没装csstools.postcss插件（唯一官方维护的 VSCode PostCSS 插件） - 装完必须重启 VSCode，否则语言模式切换不生效
构建工具链漏了 postcss-loader 或位置不对
插件配置再正确，如果 postcss-loader 没进 Webpack/Vite 的 CSS 处理链，就等于没配。很多项目以为加了 postcss.config.js 就万事大吉，其实 loader 才是入口闸门。
立即学习“前端免费学习笔记（深入）”；
- Webpack 项目检查
module.rules中css-loader前是否配置了postcss-loader；顺序错了（比如css-loader在前），嵌套代码会被当作普通文本直接吞掉 - Vite 项目确认没禁用默认 PostCSS 支持；若用了
css.preprocessor（如scss），需额外确保postcss.config.js在根目录且被识别 - 构建后务必检查输出 CSS 文件内容，而不是只盯着源码——如果输出里还有
@nest或未展开的&，说明 loader 没触发或插件没跑
