如何在全局CSS文件中引用$lib/assets目录下的本地资源？

• 改用相对路径引用
  既然CSS和字体/图片都在$lib/assets目录下，直接把CSS里的绝对路径换成相对路径就行。比如你的字体文件放在$lib/assets/fonts/Bitter-Regular.ttf，修改CSS代码如下：

  @font-face {
    font-family: "Custom";
    src: url("./fonts/Bitter-Regular.ttf");
    font-display: swap;
  }
  

  这里的./指向当前CSS文件所在的目录，构建工具会自动处理这些资源，给文件名加上哈希后打包，实现长期缓存。

• 核对目录结构
  保证你的文件层级是这样的：

  src/
    lib/
      assets/
        app.css
        fonts/
          Bitter-Regular.ttf
        images/
          你的图片.png
  

  这样相对路径才能准确找到目标资源。

• 构建时的自动处理
  SvelteKit会自动识别$lib下的静态资源，构建时会把它们复制到输出目录，并且给文件名加上内容哈希（比如Bitter-Regular.xyz789.ttf）。这种带哈希的文件名能让浏览器缓存资源长达1年以上，完全解决之前的缓存时长问题。

• 验证效果
  执行npm run build后，打开build/assets目录，能看到带哈希的资源文件，同时CSS里的url会被替换成对应的哈希路径。启动生产服务后，查看浏览器网络请求，确认资源加载路径正确，且缓存头设置为长期缓存。

内容的提问来源于stack exchange，提问作者Kevin Renskers