PostCSS 必须启用 postcss-cascade-layers 插件，否则 @layer 语句被静默删除；@layer 必须位于 CSS 文件最顶部首条有效语句，前仅允许空行或纯注释；第三方样式须用 @import url() layer() 显式注入或内联至对应层，不可嵌套在 @layer 块中。
PostCSS 必须启用 postcss-cascade-layers
旧版 PostCSS（v8.4 之前）或未配置插件时，@layer 语句会被直接删除，不报错、不警告、DevTools 里也看不到层标识。Vite/webpack 默认不开启该插件，必须显式安装并注册。
正确做法：
- 安装：
npm install postcss-cascade-layers --save-dev - Vite 项目：在
vite.config.js的css.postcss.plugins数组中加入require('postcss-cascade-layers') - Webpack + postcss-loader：确保
postcss.config.js的plugins列表包含该插件 - 检查构建产物：打开生成的 CSS 文件，确认
@layer reset, base, components;这类声明仍完整存在
@layer 声明必须是 CSS 文件最顶部的首条有效语句
只要 @layer 前出现任意非空行、非纯注释内容（哪怕是一行 @import、一个 :root、甚至注释里带分号或样式关键字），后续所有 @layer 都会被浏览器静默忽略——不是兼容性问题，是规范强制行为。
常见翻车点：
立即学习“前端免费学习笔记（深入）”；
-
@import "reset.css";写在@layer base;上面 →@layer失效 -
/* 主题变量 */ :root { --color-primary: #3b82f6; }出现在@layer前 → 整个层系统崩塌 -
@layer theme;和@import "antd.css" layer(theme);不在同一层级（比如后者包在@media里）→ 语法非法，整条被丢弃
稳妥写法：CSS 文件开头只允许空行或 /* ... */ 纯注释，紧接着就是 @layer reset, vendor, base, components, utilities;
第三方样式必须用 @import url("xxx.css") layer(vendor) 显式注入
直接 <link href="bootstrap.css"> 或裸 @import "bootstrap.css"; 引入的样式，全部落在「未命名顶层」，其优先级天然高于你所有命名层，根本不受 @layer 控制。
想让它服从你的层序，只有两种可靠方式：
- 用
@import url("bootstrap.css") layer(vendor);—— 注意必须是顶层语句，且layer(vendor)要和前面@layer vendor;中的名称完全一致 - 把第三方 CSS 内容复制进
@layer vendor { /* paste here */ }块内（适合小体积或需微调的库）
禁止写法：@layer vendor { @import "bootstrap.css"; } —— @layer 块内不允许嵌套 @import，整块被忽略。
层内媒体查询仍可合并，但 @layer 本身不参与 PostCSS 媒体查询优化
postcss-sort-media-queries 等插件能合并同层内的重复媒体查询，比如把两个 @media (min-width: 768px) 合成一个块，但它不会跨层合并 —— 因为层本身就是独立的级联单元。
这意味着：
-
@layer base { @media (prefers-color-scheme: dark) { ... } }和@layer components { @media (prefers-color-scheme: dark) { ... } }是两个独立媒体块，不会被合并 - 层间顺序决定最终生效规则，但每个层内部的媒体查询优化照常进行
- 若想减少体积，建议把通用响应式逻辑（如断点变量、基础栅格）统一收进
@layer base，避免分散在多层重复声明
真正容易被忽略的是：层声明一旦解析失败（比如位置不对或插件未启用），整个架构就退化回传统优先级模型，而你可能几天后才在某个按钮颜色异常时发现它早已失效。
