必须使用 postcss-nesting（v10+），它严格遵循 CSS Nesting 草案，仅处理 @nest & 语法；postcss-nested 已归档，不支持标准且行为不同。
必须用 postcss-nesting，不是 postcss-nested
很多人装了 postcss-nested 就以为搞定了，结果构建后样式全丢——它和 postcss-nesting 名字只差一个字母，但行为完全不同：postcss-nested 模仿 Sass 缩进嵌套（如 .card { p { color: red; } }），不认 @nest，也不遵循 CSS Nesting 草案，2024 年起已归档停更。
postcss-nesting（v10+）才是官方推荐、与浏览器原生行为对齐的实现，只处理显式 @nest & 语法。确认方式：运行 npm list postcss-nesting，若版本是 9.x 或更低，必须升级；若已装 postcss-nested，先 npm uninstall postcss-nested 再重装新版。
插件顺序错一位，嵌套就静默失效
postcss-nesting 必须在所有可能重写选择器的插件之前运行，否则它根本看不到原始嵌套结构，直接跳过转换。
- Webpack/Vite 项目中，
postcss-loader必须排在css-loader之前，否则嵌套代码被当作普通文本传过去，不会触发解析 - 在
postcss.config.js的plugins数组里，postcss-nesting要放在autoprefixer、postcss-preset-env、tailwindcss等之前 - Tailwind 用户注意：
tailwindcss/nesting是内置插件，但仅 Tailwind v3.3+ 提供，且必须写在tailwindcss配置项之前 - Vite 用户若在
vite.config.ts中手动配置css.postcss.plugins，需显式写入require('postcss-nesting')，不能依赖自动发现
@nest & 的位置和嵌套深度有硬限制
v10+ 不再“猜测”嵌套意图，所有规则按字面严格解析，错一点就丢弃，且不报错——DevTools 里查不到对应样式，也容易误判为“没生效”。
立即学习“前端免费学习笔记（深入）”；
-
&必须紧贴@nest后、选择器最左侧：@nest & h2✅，@nest h2 &❌ - 不支持多层
@nest嵌套：@nest & ul { @nest & li { } }会直接报语法错误；只能单层展开，写成@nest & ul li - 无
@nest的写法（如.card { & h2 { } }）在 v10+ 下被完全跳过，既不转换也不提示 - 原生浏览器中同样如此：哪怕 Chrome 120，去掉
@nest也无效——这不是构建问题，是语法层面拒绝
构建后检查输出 CSS，而不是只看源码
很多问题表面是“没生效”，实际是转换失败或 loader 没触发。别只盯着源文件里的嵌套写法，直接打开构建产物（如 dist/assets/index.xxxx.css），搜索展开后的选择器（如 .card h2），确认是否真实生成。
如果没找到，优先排查三件事：postcss-nesting 是否真被加载、是否在正确位置、源码里是否用了合法的 @nest & 结构。这三处任一出错，都会导致静默丢弃，连 warning 都没有。
