应安装 postcss-nesting 而非 postcss-nested，且需确保其在插件链中优先运行、语法严格符合 css nesting 规范（如 @nest & .title 正确，& :hover 错误），否则会静默丢弃嵌套规则。
postcss-nesting 插件本身就能解析原生 CSS 嵌套语法，但你遇到“无法解析”，大概率是装错了包、配错了顺序，或写错了语法。
你装的其实是 postcss-nested（拼写差一个字母）
这是最常踩的坑：npm install 时手误敲成 postcss-nested，而它只处理 Sass 风格的缩进嵌套（如 .card { h2 { color: red; } }），完全不认识 @nest 或 & 在原生语境下的用法。
- 运行
npm list postcss-nesting，如果输出里没有postcss-nesting@10.0.0+，说明没装对 -
postcss-nested已归档、不再维护，且与postcss-nesting冲突——同时存在会静默跳过嵌套规则 - 必须执行
npm uninstall postcss-nested，再npm install --save-dev postcss-nesting
插件顺序错位导致它根本没机会看到 @nest
postcss-nesting 必须在所有重写选择器的插件之前运行，否则嵌套结构在它介入前就被其他插件当普通文本吞掉了。
- 在
postcss.config.js中，require('postcss-nesting')要排在autoprefixer、tailwindcss、postcss-preset-env之前 - Tailwind 用户注意：
'tailwindcss/nesting': {}是内置封装，但它等价于postcss-nesting，不能和独立安装的postcss-nesting共存 - Vite/Webpack 项目中，若
css-loader或style-resources-loader提前介入，也会截断原始嵌套代码
你写的不是合法的原生嵌套语法
v10+ 版本严格按 CSS Nesting 规范校验，不猜测、不容错。漏一个 @nest、多一个空格、&位置不对，整块规则就丢弃，DevTools 里完全看不到对应样式。
-
@nest & .title✅；@nest .title &❌（& 不在最左）；@nest &.title✅；@nest & .title和@nest &.title编译结果不同 -
&:hover✅；& :hover❌（空格导致变成后代选择器）；&::before✅；& ::before❌ - 没写
@nest的写法（如.card { & h2 { } }）在 v10+ 中被完全跳过，不是兼容性问题，是语法拒绝
真正容易被忽略的是：它不报错，也不警告，只安静地丢弃非法嵌套块。检查构建产物（比如 dist/assets/index.xxxx.css）里有没有展开后的选择器，比盯着源码更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
