From a994839b5a608a847abc54d9bb422c57b2c888d3 Mon Sep 17 00:00:00 2001
From: dsh <dsh@local>
Date: Tue, 15 Sep 2026 12:45:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20KaTeX=20=E5=AD=97=E4=BD=93?=
 =?UTF-8?q?=E5=85=A8=E9=83=A8=20404=EF=BC=9A60=20=E6=9D=A1=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E8=AD=A6=E5=91=8A=EF=BC=8Cdist=20=E9=87=8C=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AA=E5=AD=97=E4=BD=93=E9=83=BD=E6=B2=A1=E8=BE=93=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题
- 构建时刷 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 集合为空）
---
 src/data/reading.json        | 2 +-
 src/layouts/BaseLayout.astro | 4 ++++
 src/styles/global.css        | 1 -
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/data/reading.json b/src/data/reading.json
index 2c4c4ce..d2e8de4 100644
--- a/src/data/reading.json
+++ b/src/data/reading.json
@@ -1,5 +1,5 @@
 {
-  "updatedAt": "2026-09-15T04:22:32.764Z",
+  "updatedAt": "2026-09-15T04:44:09.927Z",
   "source": "weread",
   "books": [
     {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 09b4324..d6d4d9b 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -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"
diff --git a/src/styles/global.css b/src/styles/global.css
index 6b65985..f956087 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,4 +1,3 @@
-@import "katex/dist/katex.min.css";
 @import "./transition.css";
 @import "tailwindcss";
 @import "tw-animate-css";