第三方库css必须用@import url(...) layer()导入才能纳入命名层，否则进入隐式顶层；需先声明@layer顺序，再将规则包入对应层，且构建工具须支持cascade layers特性。
第三方库样式默认不进任何 @layer，而是掉进隐式「未命名顶层」，优先级天然高于你所有命名层——所以光写 @layer framework 没用，必须显式把它收编进来。
第三方 CSS 必须用 @import url(...) layer() 导入
直接 <link href="bootstrap.css"> 或 @import "bootstrap.css"; 会跳过所有层，直接进隐式顶层。唯一可靠路径是新建一个独立 CSS 文件（如 layers.css），顶部第一行写：
@import url("node_modules/bootstrap/dist/css/bootstrap.min.css") layer(framework);
注意几点：
-
@import必须在文件最顶部，前面不能有任何空行以外的内容（注释可以，但不能有/* */以外的字符） - 路径必须可解析：Vite 别名需生效，CDN 地址必须带
https:// -
layer(framework)括号里只能填一个已声明过的层名，不能加引号，也不能写layer("framework")或layer(framework, base) - 语句必须以分号结尾，漏掉会导致后续所有
@layer声明被浏览器忽略
@layer 声明顺序决定覆盖能力
层名本身不包含样式，只是占位和排序。你得先声明顺序，再往里面塞规则。例如：
@layer reset, framework, components, overrides;
这行必须出现在整个项目所有 CSS 的最顶部（比如 main.css 开头），且不能重复声明同名层。之后才能写：
@layer framework { /* Bootstrap 的样式会自动归入此层 */ }
@layer overrides { .btn { background: #3b82f6; } }
关键点：
-
@layer overrides必须在@layer framework之后声明，否则覆盖无效 - 你的自定义规则必须包在
@layer overrides { ... }里，裸写.btn { ... }会掉回隐式顶层，可能被框架里更重的选择器反杀 - 如果第三方库自己用了
@layer（如 Bootstrap 5.3+），它内部的层结构仍受你顶层@layer reset, framework, ...顺序约束
构建工具不支持就等于白配
旧版 PostCSS（postcss@8.4 之前）或没启用 postcss-cascade-layers 插件时，@import url(...) layer(...) 会被整条静默删除，连警告都没有。Vite 用户需确认：
- Vite 版本 ≥ 4.5（原生支持）或手动配置
postcss.config.js加入插件 - Webpack 用户需升级
postcss-loader并显式引入插件 - DevTools 的 Styles 面板里某条规则右侧没出现
layer(overrides)标记，基本就是构建环节失效了
最容易被忽略的是：层声明位置错一毫，整个机制就失效——@layer 必须是 CSS 文件或 <style></style> 块里的第一个非空、非注释语句；只要前面混了一行 * { margin: 0; } 或 .root { }，后面所有层名都不会被识别，DevTools 里也看不到 layer 标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
