Webpack 5+ 默认不处理 @font-face 中的 url() 字体路径，需配置 asset/resource 规则或改用 public/ 目录+绝对路径，并验证字体文件位置、请求 URL 及 font-family 元数据一致性。
Webpack 解析 @font-face 中的 url() 时默认不处理字体文件
Webpack 5+ 默认把 url('./fonts/bootstrap-icons.woff2') 当作模块请求，但若没配 asset 规则，它既不会复制文件，也不会重写 CSS 中的路径——结果就是构建产物里 CSS 还写着相对路径，而字体文件压根没进 dist/，浏览器自然 404。
这不是你 CSS 写错了，是 Webpack 没被明确告知：“这个 url 指向的是要拷贝的静态资源”。
- 检查
webpack.config.js的module.rules是否有匹配.woff2、.woff、.ttf等后缀的规则 - 旧版常用
url-loader+file-loader，Webpack 5 推荐直接用type: 'asset/resource' - 别依赖
css-loader自动解析 url()：它只负责把 CSS 转 JS 字符串，不负责文件搬运
Bootstrap CSS 里的 ./fonts/ 是相对于 CSS 文件位置算的
比如 node_modules/bootstrap/dist/css/bootstrap.min.css 里写了 url("./fonts/bootstrap-icons.woff2")，那浏览器会尝试请求 /css/fonts/bootstrap-icons.woff2（假设该 CSS 被输出到 /css/ 目录），而不是你期望的 /fonts/。
构建后 CSS 路径变了，但字体没跟着一起挪，层级就断了。
- 最稳做法：把字体文件统一放
public/fonts/，然后在 CSS 中改用绝对路径url("/fonts/bootstrap-icons.woff2") - 如果必须从
src/assets/fonts/引入，就得在 Webpack 配置里加 asset 规则，并确保generator.filename输出到和 CSS 同级或可预测的位置（如fonts/[name].[hash:8][ext]） - 禁止在 CSS 中写
url("../../fonts/x.woff2")：Webpack 很难推导这种跳转，容易漏匹配
Bootstrap 图标字体加载失败 ≠ CSS 没引入成功
控制台看到 GET /fonts/bootstrap-icons.woff2 404，不代表你 import 语句写错了；哪怕 import 'bootstrap/dist/css/bootstrap.min.css' 完全正确，字体照样不显示。
关键看 Network 面板里失败请求的 Request URL 和 dist/ 目录实际结构是否对得上。
- 打开浏览器 DevTools → Network → Filter 输入
font或woff2 - 点开失败请求，看 Headers → Request URL 是什么（比如
https://yoursite.com/css/fonts/x.woff2） - 去
dist/目录里找对应路径：如果只有dist/fonts/x.woff2，说明 Webpack 没把字体输出到css/fonts/子目录下 - 注意大小写：Linux 服务器上
Bootstrap-Icons.woff2和bootstrap-icons.woff2是两个文件
font-family 名字对不上也会“白加载”
就算路径全对、HTTP 状态码是 200、Network 显示字体已下载完成，图标仍显示为方框——大概率是 @font-face 里写的 font-family: 'Bootstrap Icons' 和字体文件内嵌的 PostScript Name 不一致。
浏览器只认字体元数据里的名字，不认文件名或路径。
- 用
fonttools命令行查：运行ftxvalidator bootstrap-icons.woff2或pyftsubset --list-names bootstrap-icons.woff2 - 在线工具也行：上传字体到 https://fontdrop.info/，看 “Full Name” 或 “PostScript Name” 字段
- Bootstrap 官方字体的 PostScript Name 通常是
bootstrap-icons（全小写、无空格），不是Bootstrap Icons
真正卡住人的地方，往往不是配置没写，而是没验证构建产物里字体文件到底落在哪、浏览器到底发了什么请求、字体元数据里叫什么名字。三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
