@import 本身不支持指定层级，仅在通过 <link> 引入的外部 CSS 文件中 @import "x.css" layer(name) 才有效；<style> 中的 layer 声明会被浏览器忽略，真正可靠的方式是 <link rel="stylesheet" layer>。
@import 本身不能在 CSS 文件中指定层级（layer），所谓“@import 引入特定层级”是常见误解；真正支持 layer 的只有 <link rel="stylesheet" layer>，且必须通过 HTML 的 <link> 标签引入外部 CSS 文件。
@import "xxx.css" layer(name) 只在外部 CSS 文件中合法
你看到的 @import "theme.css" layer(theme) 写法，仅当它出现在一个**通过 <link> 引入的外部 CSS 文件里**才有效。例如：
@import "./dark.css" layer(dark);
这个 dark.css 必须由 <link rel="stylesheet" href="main.css"> 加载，而不能写在 <style> 标签内。
-
<style>@import "dark.css" layer(dark);</style>→ 层声明被浏览器静默忽略，等效于普通导入 - 路径解析基于
main.css所在目录，不是 HTML 页面路径 - 需要 Chrome 99+、Firefox 119+、Safari 17.4+，旧版不支持
layer()
@import 在 <style> 中写 layer() 会失效
HTML 规范明确限制：<style> 块中的 @import 只允许带媒体查询（如 @import "x.css" screen），layer() 不在此列。
立即学习“前端免费学习笔记（深入）”；
- 浏览器直接跳过括号及之后内容，
@import "x.css" layer(theme)等价于@import "x.css" - 不会报错，但也不会进任何层，所有规则都落在 unlayered（未命名层）
- 想调试？打开 DevTools 的 Styles 面板，看某条规则是否显示 “layer: theme” —— 如果没有，说明 layer 没生效
真正可靠的层导入方式：<link layer>
把样式表“精准注入”到指定层，唯一推荐且兼容性明确的方式是：
<link rel="stylesheet" href="reset.css" layer="base">
- 多个
<link layer>的声明顺序决定层优先级：后出现的层更高 -
<link layer="ui">和@import "ui.css" layer(ui)是两套独立机制，不能混用同名层来“合并” - 构建工具（Vite/Webpack）默认不处理
layer属性，它纯运行时生效，无需额外配置
@layer 声明顺序比文件加载顺序更重要
很多人以为“先加载的 CSS 里的 @layer utilities 就一定更低”，其实错的。层优先级只取决于你在整个页面所有 CSS 中**第一次显式声明该层名的位置**。
- 比如
tailwind.css有@layer utilities，而你的custom.css也写了@layer utilities，只要custom.css的<link>在tailwind.css之后，你的utilities层就覆盖 Tailwind 的 - 即使
tailwind.css已加载完成，只要它里面没显式声明@layer utilities，后续任何 CSS 文件首次声明该层，就确立该层的起点
容易被忽略的是：layer 优先级不依赖资源是否已下载完，而依赖 CSS 解析时的首次 @layer 声明位置 —— 这个点在动态插入 <link> 或使用 JS 注入时尤其关键。
