@import "lib.css" layer(name) 必须写在独立css文件中，因html的块不支持layer()语法，否则被静默忽略而落入隐式最高层；该语句须置于css文件最顶部，且需浏览器支持及构建工具启用postcss-cascade-layers插件。
@layer + @import layer() 是目前唯一能稳定把第三方库样式“收编”进你层体系的方案，但必须满足三个硬性条件：声明位置正确、语法完整、浏览器支持。
为什么 @import "lib.css" layer(name) 必须写在外部 CSS 文件里
内联 <style></style> 块中写 @import "lib.css" layer(name) 会被浏览器静默忽略括号及之后内容，等效于普通导入——它不进任何层，直接落入隐式最高层。这是 HTML 规范限制：<style></style> 中的 @import 只认媒体查询语法（如 @import "x.css" screen），layer() 不在此列。
必须把这条语句放进一个独立的 CSS 文件（如 layers.css），再用 <link rel="stylesheet" href="layers.css"> 引入。此时浏览器才真正解析 layer(name) 参数，并将该文件所有规则归入指定层。
- 路径是相对于 CSS 文件本身，不是 HTML 页面路径
- 该语句必须出现在
layers.css最顶部，前面不能有任何其他 CSS 规则或@import（哪怕带媒体查询） - 构建工具（如 Vite）若未启用
postcss-cascade-layers，旧版 PostCSS 会直接删掉整条语句，无提示
@import layer() 的写法和常见拼写错误
合法写法只有一种：@import "antd.css" layer(framework);。注意：
- 引号只能用于 URL，不能套在
layer()里：layer("framework")是无效语法 - 层名严格区分大小写：
layer(Framework)和layer(framework)是两个不同层 - 不能加空格：
layer( framework )在部分浏览器中会失败 - 必须以分号结尾，漏掉会导致后续所有
@layer声明被忽略
查第三方库实际层名最可靠的方式是打开它的源码 CSS 文件，搜索 @layer ——比如 Tailwind 默认用 utilities，但某些插件可能导出为 theme 或 components。
如何让自定义样式稳稳压过第三方库
仅靠 @import "lib.css" layer(framework) 还不够。你自己的覆盖规则必须满足两个前提：
-
@layer声明顺序必须在它之后：@layer reset, base, framework, custom;——custom层要排在framework后面 - 你的覆盖规则必须写在
@layer custom { }块内，不能写成裸规则（如直接写.ant-btn { }），否则它会掉进未命名顶层，反而可能被framework层里的高权值选择器反杀 - 同一层内仍受选择器特异性约束：
@layer custom { #modal .ant-btn }能赢@layer framework { .ant-btn }，但@layer custom { .ant-btn }不一定赢
DevTools 的 Styles 面板里，每条规则右侧若显示 layer(custom) 字样，说明它已成功进入目标层；若没有，大概率是 @layer custom; 声明位置太靠后，或层名拼错导致进了匿名层。
当第三方库自己用了 @layer 时怎么处理
像 Chakra UI v2.8+、Bootstrap 5.3+ 这类现代库已原生支持 @layer，但它们的层名（如 @layer chakra）可能和你项目中的 @layer framework 冲突。此时：
- 同名层会自动合并，但生效顺序取决于「首次声明该层名的位置」，不是
@import出现位置 - 如果你先写
@layer chakra;，再@import "chakra.css"，那么你的空层声明就占了先机，Chakra 的规则会合并进来，但你的后续@layer chakra { }才真正生效 - 更稳妥的做法是跳过
@import layer()，直接把库的 CSS 内容复制粘贴进@layer framework { /* paste here */ }—— 彻底规避加载时序和命名冲突
真正难缠的不是语法，而是第三方库是否「诚实」地把全部样式都放进 @layer —— 很多老版本或定制构建产物，只在 reset 部分用了 @layer，而组件样式仍是裸规则，这部分永远落在隐式顶层，你得手动补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
