postcss-nested 必须按严格顺序加载才生效：postcss-import 第一（确保导入内容可见），postcss-nested 第二（展开嵌套），autoprefixer 最后（加前缀）；否则会原样输出或报错。
postcss-nested 能让你在普通 CSS 文件里写 &、@at-root 这类嵌套语法，但直接装上就用？不行。它必须被正确加载、排在合适位置，否则要么报错，要么静默失效。
为什么 postcss-nested 会“不生效”或报错
常见现象是：写了 .card { .title { color: blue; } }，结果编译后原样输出，或者抛出 Unknown word 错误。根本原因不是插件坏了，而是它没机会解析——CSS 还没被展开成标准规则，就被后续插件（比如 autoprefixer）提前处理了。
-
postcss-nested必须在所有依赖“展开后规则”的插件之前运行，比如autoprefixer、postcss-preset-env - 如果用了
postcss-import，它必须排第一，否则postcss-nested看不到@import进来的嵌套内容 - 和
postcss-nesting（原生@nest）互斥，两者同时启用会导致 AST 冲突，编译失败
postcss.config.js 中的正确插件顺序
顺序不是建议，是硬性要求。以下是最小可行配置：
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-nested'),
require('autoprefixer'),
]
}
说明：
-
postcss-import必须最前：确保所有@import合并完成，postcss-nested才能处理完整文件树 -
postcss-nested紧随其后：把嵌套结构转成扁平规则，例如.btn:hover展开为独立选择器 -
autoprefixer放最后：此时所有选择器已确定，它才给:hover、display: flex等加前缀
Webpack 或 Vite 中的实际调用链
构建工具只负责把 CSS 字符串喂给 PostCSS，真正起作用的是 postcss.config.js 的顺序。但如果你漏了 postcss-loader，那整个链条就断了：
- Webpack：确保
module.rules中use数组包含postcss-loader，且它在css-loader之后、style-loader之前 - Vite：默认支持
postcss.config.js，但必须用 CommonJS 格式（module.exports），ESM 导出会静默忽略 - 命令行调试：运行
npx postcss input.css -o output.css --verbose，看 AST 输出里是否出现展开后的规则节点
容易被忽略的兼容性细节
postcss-nested 默认行为接近 Sass，但有几个边界情况必须手动控制：
-
&在伪类里要小心：a:hover &是合法的，但&:hover和&.active必须紧贴父选择器，中间不能换行或空格过多 - 嵌套深度无硬限制，但过深（>5 层）可能触发某些 Linter 报警，比如
stylelint需要单独配max-nesting-depth - 不支持
@media内嵌套选择器的“提升”逻辑（即不会自动把@media (min-width: 768px) { .btn { color: red; } }提到顶层），这点和 Sass 不同
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
