SvelteKit：CSS 中引用的静态资源的开发/构建和路径问题

在 Svelte 文件的 CSS 部分中，假设我使用背景图像：

div { background-image: url(img/bg.jpg); }

图像文件位于static文件夹（static/img/bg.jpg）。这个简单的示例在开发模式下完美运行。

如果我尝试构建项目（使用适配器自动），我会收到警告：

(...) 中引用的 img/bg.jpg 在构建时未解析...

如果我运行该应用程序，它无法找到图像（位于/_app/immutable/assets/img/bg.jpg).

这个答案：https://stackoverflow.com/a/75716822/494979 https://stackoverflow.com/a/75716822/494979建议在中定义一个别名vite.config.ts file:

export default defineConfig({
resolve: {
    alias: {
      $img: "/static/img",
    },
  },
});

并将 CSS 更改为：

div { background-image: url($img/bg.jpg); }`

构建的项目现在可以正确加载图像（来自/_app/immutable/assets).

但现在它在开发模式下不起作用（尝试从/static/img/bg.jpg代替/img/bg.jpg).

对于从 CSS 加载的其他资源，如字体（带有@import).

SvelteKit 文档 (https://kit.svelte.dev/docs/assets https://kit.svelte.dev/docs/assets）说：“对于通过 CSS url() 函数包含的资源，您可能会发现 vitePreprocess 很有用。”，但我不知道如何。

我怎样才能拥有一个既适用于开发又适用于构建的配置，正如预期的那样？

这是我解决问题的方法，通过编辑vite.config.ts file.

配置对象需要作为函数传递{ mode }作为参数，这样我们就可以检查我们所处的模式（开发/生产）并相应地设置别名值。

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig(({ mode }) => ({
  plugins: [sveltekit()],
  resolve: {
    alias: {
      $img: mode === "production" ? "./static/img" : "../img",
    },
  },
}));

// Config was initially this (worked with build, but not dev):
// export default defineConfig({
//   plugins: [sveltekit()],
//   resolve: {
//     alias: {
//       $img: "./static/img",
//     },
//   },
// });

（我想出了这条路../img经过几次尝试后进入开发模式，但这并不直观）。

这仍然感觉有点像一种解决方法。无论如何，我想知道为什么 SvelteKit 默认情况下不能正确解决这个问题（在我看来，这里应该不需要别名）。也许有更好的解决方案？