必须写在外部css文件最顶部，因html的块不支持layer()语法，浏览器会静默忽略括号及之后内容，等效于普通导入而落入隐式最高层；且需chrome 104+、firefox 106+、safari 17.4+支持。
@import 的 layer() 语法是目前唯一能将第三方 CSS “收编”进你层体系的方案，但必须写在外部 CSS 文件最顶部，且浏览器需支持（Chrome 104+、Firefox 106+、Safari 17.4+）。
为什么 @import "lib.css" layer(name) 必须放在独立 CSS 文件里
HTML 的 <style></style> 块中写这条语句会被浏览器静默忽略括号及之后内容，等效于普通 @import——它不进任何层，直接落入隐式最高层。这是 HTML 规范限制：<style></style> 中的 @import 只认媒体查询语法（如 @import "x.css" screen），layer() 不在此列。
- 必须把
@import "antd.css" layer(framework);放进一个独立的 CSS 文件（如layers.css），再用<link rel="stylesheet" href="layers.css">引入 - 该语句必须出现在
layers.css最顶部，前面不能有任何其他规则、@import或注释（空行除外） - 路径是相对于
layers.css文件本身，不是 HTML 页面路径 - 构建工具（如 Vite）若未启用
postcss-cascade-layers插件，旧版 PostCSS 会直接删掉整条语句，无提示
@import layer() 的合法写法与常见拼写错误
合法写法只有一种：@import url("base.css") layer(base);。注意：
- 引号只能用于 URL，不能套在
layer()里：layer("base")是无效语法 - 层名严格区分大小写：
layer(Base)和layer(base)是两个不同层 - 不能加空格：
layer( base )在部分浏览器中会失败 - 必须以分号结尾，漏掉会导致后续所有
@layer声明被忽略 -
url()不能省略；@import "base.css" layer(base);也合法，但显式写url()更稳妥
如何让自定义样式稳稳压过第三方库
仅靠 @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 → Elements 面板 → 选中目标元素 → Computed 标签页 → 找到对应属性 → 看右侧 “Origin” 列：如果显示 layer(framework) 或 layer(custom)，说明已成功归层；若显示 “inline”、“user agent stylesheet” 或无 layer 标识，则说明某处写法或加载顺序出错。
最容易被忽略的是：第三方库自身没用 @layer，或你没查清它实际导出的层名（比如 Tailwind 默认是 utilities，但某些插件可能用 theme）——没对齐层名，整个机制就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
