PostCSS通过Autoprefixer添加厂商前缀、postcss-preset-env降级新CSS特性，并结合browserslist配置，实现自动兼容旧版浏览器。
旧版编译环境（如 PostCSS
确认当前 postcss-nesting 版本是否低于 v10
运行 npm list postcss-nesting 查看实际安装版本。v9 及以下（例如 postcss-nesting@9.0.1）不支持现代嵌套语法，会把 @nest & .item 当作无效规则直接跳过，也不报错；而 v10+ 才真正实现 CSS Nesting 草案语义解析。
- 若输出是
└── postcss-nesting@9.x或更低，必须升级 - v10+ 的关键变化：不再兼容 Sass 风格缩进嵌套（如
.card { p { color: red; } }），只认显式@nest块 - 升级后旧写法（无
@nest的嵌套）会彻底失效，不是警告，是静默忽略
升级 postcss-nesting 并调整 PostCSS 主版本
v10+ 要求 PostCSS ≥ 8.4，且必须用 postcss-nesting（注意不是 postcss-nested）。后者是另一个已归档的旧插件，名字相似但互不兼容。
- 卸载旧插件：
npm uninstall postcss-nested（如果装了） - 安装新版：
npm install --save-dev postcss-nesting@latest - 检查
postcss版本：npm list postcss，若低于8.4.0，需同步升级：npm install --save-dev postcss@latest - 配置中必须用
require('postcss-nesting')，不能写成require('postcss-nested')
重写嵌套语法：@nest 是硬性要求，& 必须在最左
v10+ 不再“猜测”嵌套意图，所有嵌套必须显式包裹在 @nest 中，且 & 必须紧贴 @nest 后、选择器最左侧，否则整个规则被丢弃（DevTools 里完全看不到）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.card { @nest & h2 { color: blue; } } - ❌ 错误：
.card { & h2 { color: blue; } }（无@nest，v10+ 直接忽略） - ❌ 错误：
.card { @nest h2 & { color: blue; } }（&不在最左，语法非法） - ❌ 错误：
.card { @nest & ul { @nest & li { ... } } }（不支持嵌套@nest，单层展开即止）
构建失败时优先检查 loader 链与插件顺序
即使插件升级完成，Webpack/Vite 用户仍可能因 loader 配置错位导致嵌套未被处理——常见于使用 css-loader + postcss-loader 组合的项目。
-
postcss-loader必须在css-loader之前执行，否则嵌套语法传到 css-loader 时已是未处理原始文本 - 确保
postcss-nesting在postcss.config.js的plugins数组中排在靠前位置，尤其要在autoprefixer、postcss-preset-env等可能重写选择器的插件之前 - Vite 用户注意：
vite.config.ts中若手动配置css.postcss.plugins，别漏掉require('postcss-nesting')，Vite 默认不自动读取postcss.config.js
最易被忽略的是：v10+ 报错极安静——它不抛异常，只是跳过非法规则。调试时别只盯着终端，务必打开浏览器 DevTools 的 Styles 面板，确认生成的选择器是否真的出现。没看到？八成是 @nest 缺失或 & 位置错了。
