英文:
Tailwind and Vite warnings: "didn't resolve at build time, it will remain unchanged to be resolved at runtime"
问题
我使用以下技术组合：
- SvelteKit（1.5.0，使用TypeScript），使用带有SvelteKit的构建工具Vite（4.0.0）
- Svelte的
adapter-static（2.0.1）用于发布到GitHub Pages - 使用Typography插件的 TailwindCSS
- 通过在
+layout.svelte中导入import '../inter.css';来使用 Inter 字体系列
当运行 npm run build 时，我会得到一堆这样的警告（为了可读性添加了换行符）：
/img/logo.png 在 D:/git/my-org/my-repo/src/app.css 中引用
在构建时没有解析，将在运行时保持不变
<!-- -->
/fonts/Inter-Thin.woff2?v=3.19 在 D:/git/my-org/my-repo/src/inter.css 中引用
在构建时没有解析，将在运行时保持不变
对我个人而言，构建输出实际上正常工作，包括了所有上述资源。即使我删除输出文件夹并生成全新的构建，也没有遇到问题或错误。但这些输出看起来对我来说更像是警告，而“警告是未来的错误”！
所以，我的问题是：上面的这条消息是什么意思，我应该将其视为警告并做出更改吗？
如何重现（使用 Svelte）
以下是重现上述警告的一种方法：
- 运行
npm create svelte@latest my-app，参见 https://kit.svelte.dev/docs/creating-a-project，我选择了“骨架项目”，带有TypeScript和Prettier - 按照 https://tailwindcss.com/docs/guides/sveltekit 的步骤：
- 运行
npm install -D tailwindcss postcss autoprefixer - 运行
npx tailwindcss init tailwind.config.cjs -p svelte.config.ts中已经包含了vitePreprocess- 在
tailwind.config.js中添加content: ['./src/**/*.{html,js,svelte,ts}'] - 在新的
app.css文件中添加@tailwind指令，并在新的+layout.svelte文件中进行import
- 运行
- 在
+page.svelte中添加<div class="bg-[url('/favicon.png')]">Repro.</div> - 运行
npm run build
简而言之，它似乎是由于任意值引用其他文件而触发的？（此时我不确定是否需要Svelte来重现问题，也许只有Tailwind+Vite就足够了？）
如何重现（不使用 Svelte）
也可以在不使用Svelte的情况下完成，只使用Vite项目中的Tailwind：
- 按照 https://vitejs.dev/guide/ 进行操作（
npm create vite@latest），选择“Vanilla” - 按照 https://tailwindcss.com/docs/guides/vite 的步骤，但跳过Vite创建步骤（已经完成），并将
@tailwind指令添加到模板的style.css中 - 将
class="bg-[url('vite.svg')]"添加到<body>标签
这里也会出现相同的警告。
英文:
I'm using the following combination of technologies:
- SvelteKit (1.5.0, using TypeScript), with Vite (4.0.0) as the build tool that comes with SvelteKit)
- Svelte's
adapter-static(2.0.1) for publishing to GitHub Pages - TailwindCSS with the Typography plugin
- The Inter font families via
import '../inter.css';in+layout.svelte
When running npm run build I get a bunch of these warnings (newlines for readability:
/img/logo.png referenced in D:/git/my-org/my-repo/src/app.css
didn't resolve at build time, it will remain unchanged to be resolved at runtime
<!-- -->
/fonts/Inter-Thin.woff2?v=3.19 referenced in D:/git/my-org/my-repo/src/inter.css
didn't resolve at build time, it will remain unchanged to be resolved at runtime
For me personally, the build output actually works, and includes all said resources. Also if I delete the output folder and generate a completely fresh build. I'm experiencing no problem or error. But the output feels like warnings to me, and "warnings are errors from the future"!
So, my question is: What does this message above mean, and should I treat it as a warning and change something?
How to reproduce (with Svelte)
Here's one way to reproduce said warning:
npm create svelte@latest my-app, see https://kit.svelte.dev/docs/creating-a-project, I chose "Skeleton Project" with TypeScript and Prettier- Follow https://tailwindcss.com/docs/guides/sveltekit in short:
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init tailwind.config.cjs -p- the
vitePreprocesswas already in mysvelte.config.ts content: ['./src/**/*.{html,js,svelte,ts}']intailwind.config.js- add
@tailwinddirectives to a newapp.cssfile andimportit in a fresh+layout.sveltefile
- Add
<div class="bg-[url('/favicon.png')]">Repro.</div>to+page.svelte - Run
npm run build
In short, it seems to be triggered by arbitrary values referencing other files? (At this point I'm not sure if Svelte is strictly needed to reproduce the issue, perhaps just Tailwind+Vite is enough?)
How to reproduce (without Svelte)
It can also be done without Svelte, just Tailwind in a Vite project:
- Follow https://vitejs.dev/guide/ (
npm create vite@latest), pick "Vanilla" - Follow https://tailwindcss.com/docs/guides/vite but skip the Vite creation step (already done) and add the
@tailwinddirectives tostyle.cssfrom the template - Add
class="bg-[url('vite.svg')]"to the<body>tag
The same warning occurs here too.
Footnote: I had added my repro as a comment to Vite GitHub issue which has since been marked as resolved by a PR.
答案1
得分: 10
似乎潜在解决方案是在你的 vite.config.ts 文件中声明静态路径。例如：
import { resolve } from 'path';
const config: UserConfig = {
resolve: {
alias: {
$fonts: resolve('./static/fonts')
}
}
};
export default config;
当然，这也适用于其他 Vite 配置（比如对于 JavaScript）。
一旦你设置了这个别名，你可以在你的 app.css 中像这样使用它：
@font-face {
src: url('$fonts/<你的字体文件名>') format('woff2');
/* 任何其他字体指令 */
}
请注意，我只是提供这个答案以尝试帮助任何人。然而，应该将功劳归给另一个 Stackoverflow 问题 中的 @H.B.。
英文:
It seems like the potential solution is to declare your static paths in your vite.config.ts file. For example:
import { resolve } from 'path';
const config: UserConfig = {
resolve: {
alias: {
$fonts: resolve('./static/fonts')
}
}
};
export default config;
Of course, this is still applicable to other Vite configurations (like for javascript).
Once you have this alias set, you can use it like this in your app.css:
@font-face {
src: url('$fonts/<your font file here>') format('woff2');
/* Any other font directive */
}
Please, note that I'm merely providing this answer to try and help anyone. Credit, however, should go to @H.B. in this other Stackoverflow question.
答案2
得分: 4
对于那些正在使用Vite与纯JS和Tailwind的人。https://vitejs.dev/guide/assets.html#the-public-directory中的这部分对我有用。
> 注意：
>
> 您应该始终使用根绝对路径引用公共资源 -
> 例如，public/icon.png 在源代码中应该被引用为 /icon.png。
写成：
class="bg-[url('/wood-bg.jpg')"
成功，但是
class="bg-[url('./wood-bg.jpg')"
会得到“在构建时未解析，将保持不变以在运行时解析”的消息。
希望对您有所帮助！
英文:
For those who are using Vite with vanilla JS and tailwind. This part of https://vitejs.dev/guide/assets.html#the-public-directory worked for me.
> Note that:
>
> You should always reference public assets using root absolute path -
> for example, public/icon.png should be referenced in source code as
> /icon.png.
Writing
class="bg-[url('/wood-bg.jpg')"
succeeds but
class="bg-[url('./wood-bg.jpg')"
gives "didn't resolve at build time, it will remain unchanged to be resolved at runtime"
Hope this helps!
答案3
得分: 1
对于那些使用 Laravel/Inertia/Vue 技术栈的用户，问题似乎出在 Laravel 使用了一个别名，将 storage 目录映射到 public 目录。所以，类似上面的答案，将别名替换为绝对 URL。
将:
url('/storage/images/homeBg_2xl.jpg')
替换为:
url('../../storage/app/public/images/homeBg_2xl.jpg')
希望能对您有所帮助。
英文:
For those using the Laravel/Inertia/Vue stack, the problem seems to be Laravel's use of an alias from the storage directory to the public directory. So, similar to answers above, replace the alias with an absolute url.
replace:
url('/storage/images/homeBg_2xl.jpg')
with:
url('../../storage/app/public/images/homeBg_2xl.jpg')
Hope this helps.
答案4
得分: 1
我正在使用Vue 3，Vite和Quasar。以下部分在.vue文件中对我有效。我花了很多时间才破解这个问题。
在HTML内，以下部分有效。
<q-header elevated style="background-image: url('assets/header_altcolor.png')">
在CSS内，我在下面的部分最终对我有效。
.pageLayout {
background-image: url('/assets/landingpage_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
唯一的区别是在CSS中使用时要在前面加上斜杠。
英文:
I'm using Vue 3, Vite, and Quasar. The below worked for me in the .vue file. It took me a lot of time to crack this.
Inside HTML the below worked.
<q-header elevated style="background-image: url('assets/header_altcolor.png')">
I had the problem inside CSS and the below finally worked for me in CSS.
.pageLayout {
background-image: url('/assets/landingpage_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
The only difference was a slash in the front when we use it in CSS.
答案5
得分: 0
另一种方法是将您的图像转换为base64，然后在您的CSS文件中使用它。
background-image: url("data:image/png;base64,<base64code>");
英文:
Also, the other approach is to convert your image to base64, then use it in your CSS file.
background-image: url("data:image/png;base64,<base64code>");
答案6
得分: 0
我在设置 SvelteKit 组件的 background-image 时遇到了相同的问题。这是我在生产环境中获取错误的方法：
.selector {
background-image: url("src/assets/images/name-of-image.jpg");
}
我发现在文件路径开头省略了 / 导致了生产环境中的错误。所以我简单地在文件路径前加上了 /，现在图片在生产环境中显示正常：
.selector {
background-image: url("/src/assets/images/name-of-image.jpg");
}
英文:
I ran into this same issue when setting the background-image of a SvelteKit component. This is what I did to get the error in production:
.selector {
background-image: url("src/assets/images/name-of-image.jpg");
}
I found out that omitting the / at the beginning of the file path caused the error in production. So I simply added the / at the beginning of the file path and the images now appear in production:
.selector {
background-image: url("/src/assets/images/name-of-image.jpg");
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论