修复 KaTeX 字体全部 404:60 条构建警告,dist 里一个字体都没输出
问题 - 构建时刷 60 条 `fonts/KaTeX_*.woff2 referenced in ... didn't resolve` - 更要紧的是这不是纯警告:dist 里 0 个字体文件,而 CSS 里写的是相对路径 url(fonts/KaTeX_AMS-Regular.woff2),CSS 输出在 /_astro/ 下, 浏览器会去找 /_astro/fonts/… —— 那个目录不存在,数学公式全部退化成系统字体 根因 - global.css 顶部写的是 @import "katex/dist/katex.min.css" - postcss 只挂了 @tailwindcss/postcss,Tailwind v4 会自己解析并**内联** @import, 内联之后 KaTeX 的 url() 被算成相对 src/styles/ 去找,自然找不到 (确认过不是我引入的:把 package.json 的 type:module 去掉重跑,一样 60 条; 这条 @import 从初始提交就在) 修法 - global.css 里删掉那行 @import - 改成在 BaseLayout.astro 的 frontmatter 里 `import "katex/dist/katex.min.css"` - 走 Vite 的 CSS 模块管线,url() 按 node_modules/katex/dist/ 解析, 字体带哈希输出到 _astro/,CSS 里替换成绝对路径 验证 - 构建:KaTeX 警告 60 -> 0;dist 字体 0 -> 59 个、共 1.2MB - CSS:20 条 @font-face,59 处 url(/_astro/KaTeX_*.woff2) 全部绝对化 - LaTeX 那篇文章含 17 处 class="katex" 标记,引用的就是这份 CSS - dev server:ERROR 0,KaTeX 警告 0,首页 200 - 全量构建日志现在只剩 1 条预期内的 [WARN] glob-loader(studies 集合为空)
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"updatedAt": "2026-09-15T04:22:32.764Z",
|
||||
"updatedAt": "2026-09-15T04:44:09.927Z",
|
||||
"source": "weread",
|
||||
"books": [
|
||||
{
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
---
|
||||
// KaTeX 数学公式样式。必须从 JS 侧 import —— 写在 global.css 的 @import 里会被
|
||||
// Tailwind v4 内联,url(fonts/…) 就丢掉了原有的相对位置,字体解析不到(构建时 60 条警告,
|
||||
// dist 里一个字体都不输出)。
|
||||
import "katex/dist/katex.min.css"
|
||||
import "@/styles/global.css"
|
||||
import { ClientRouter } from "astro:transitions"
|
||||
import { analytics, homeTitle, site } from "@/data/site"
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
@import "katex/dist/katex.min.css";
|
||||
@import "./transition.css";
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
Reference in New Issue
Block a user