CSS报错@import must precede... 已确认@import在顶部仍异常，求解决方案

根据错误提示，你的@import语句出现在了CSS规则之后（第190行位于两个闭合大括号之后），以下是具体解决步骤：

• 直接修正当前文件的@import位置
  把这个字体@import移动到整个CSS文件的最顶部，确保它在所有CSS规则、@layer或其他语句之前（仅允许@charset在它前面）。示例：

  @import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
  
  @layer base {
    html {
      /* 你的样式代码 */
    }
  }
  

• 排查CSS模块的导入顺序
  如果你在JS/TS文件中导入了多个CSS模块，Vite会按导入顺序合并这些文件。如果先导入的文件包含CSS规则，后导入的文件带有@import，就会导致@import被推到规则之后。调整导入顺序，把包含@import的文件放在最前面导入。

• 替换@import为HTML标签引入字体
  避免在CSS中使用@import引入字体，直接在HTML的<head>中添加链接标签：

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  

  这种方式不仅能规避PostCSS的语法限制，还能通过预连接提升字体加载速度。

• 检查预处理器的嵌套问题
  若使用Sass/Less等预处理器，确保原生CSS的@import没有被嵌套在选择器内部——预处理器编译后可能会把嵌套内的@import移到错误位置。

内容的提问来源于stack exchange，提问作者Micah Nyakango