@import 必须放在 @layer 声明之前，且只能出现在样式表的顶层或 @layer 块内部的最开始位置。如果试图在 @layer 之后使用 @import，浏览器会将其视为无效规则并忽略。正确的做法是先导入所有外部样式表，再定义层结构，或者将 @import 直接放入已定义的层中。
@import 与 @layer 的层级关系如何确定？
当 @import 位于 @layer 块内时，它会将引入的样式归入该层。若未指定层名，则归入匿名层。层级的优先级由 @layer 声明的顺序决定，先声明的层优先级最低，后声明的层优先级最高。例如，若先声明 @layer reset, base;，则 base 层的样式优先级高于 reset 层。
/* 正确写法：先导入，再定义层 */
@import url('reset.css');
@import url('theme.css') layer(theme);
@layer reset, theme;
/* 错误写法：在层定义后使用 @import */
@layer reset, theme;
@import url('reset.css'); /* 被忽略 */
上述代码中，reset.css 中的样式属于匿名层，而 theme.css 中的样式属于 theme 层。由于 theme 层在 @layer 声明中排在 reset 之后，因此 theme 层的样式优先级更高。若 reset.css 和 theme.css 中存在冲突的选择器，theme 层的样式将生效。
如何在 @import 中指定具体的层名称？
可以在 @import 语句后直接添加 layer(层名) 来指定引入的样式所属的层。这种方式允许在不预先声明层的情况下，直接将样式归入特定层。例如，@import url('components.css') layer(components); 会将 components.css 中的样式归入 components 层。需要注意的是，即使未在 @layer 中显式声明该层，它也会被自动创建，并在层优先级排序中处于默认位置（即最后声明的层优先级最高）。
/* 直接在 @import 中指定层 */
@import url('components.css') layer(components);
@import url('utilities.css') layer(utilities);
/* 定义层优先级 */
@layer components, utilities;
/* 此时，utilities 层的优先级高于 components 层 */
在上述代码中，components.css 和 utilities.css 分别被归入 components 和 utilities 层。由于 utilities 层在 @layer 声明中排在 components 之后，因此 utilities 层的样式优先级更高。若两个文件中存在相同的选择器，utilities 层的样式将覆盖 components 层的样式。
如果 @import 引用的文件不存在会发生什么？
如果 @import 引用的文件不存在，浏览器会记录一个警告，但不会中断样式的加载。其他有效的 @import 语句仍会继续执行。这意味着，即使某个文件缺失，也不会导致整个样式表失效。开发者应通过浏览器的开发者工具检查控制台日志，以确认是否有文件加载失败的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
