Less字体图标路径失效因@icon-font-path需相对于输出CSS文件而非源文件；qiankun子应用中URL基准变为主应用根路径，应改用绝对路径或统一配置base/publicPath；content插值须用~"\@{...}"转义。
Less 编译后字体图标路径失效，不是 Less 写错了，而是 @icon-font-path 的基准算错了——它必须相对于最终生成的 CSS 文件位置，而不是 .less 源文件。
Less 中 @icon-font-path 必须按输出 CSS 路径计算
编译后的 CSS 在 dist/css/，那 @icon-font-path: "../../webfonts" 才对；如果写成 "../src/assets/fonts"，编译后该路径在生产环境根本不存在。
- Webpack / Vite 项目里，
less-loader不解析@/alias，@icon-font-path: "@/assets/fonts"会原样输出到 CSS，导致 404 - Vite 项目中，若字体放在
public/fonts/，应设为@icon-font-path: "/fonts"（开头/表示 public 根） - 检查编译后 CSS 里的
@font-face声明，确认url()中的路径是否和你部署后的真实路径一致
content 插值必须用 ~"\@{...}" 转义
直接写 @icon-home: "\e900" 再 content: @icon-home，浏览器收到的是字面字符串 "\e900"，不会当 Unicode 解析。
- 正确写法：定义时去掉反斜杠和引号，
@icon-home: "e900" - 使用时强制转义插值：
content: ~"\@{icon-home}" - 别混写成
@icon-home: "icomoon\e900"——font-family和码点必须分离，否则无法批量生成或复用
qiankun 子应用中字体路径全挂了？那是 base URL 错位
qiankun 把子应用 CSS 提取为内联 后，url(./fonts/icon.woff2) 的解析基准从子应用域名变成了主应用根路径，结果请求发到了 https://main.com/fonts/...。
- 最稳方案：改用绝对路径，如
url("/subapp/static/fonts/icon.woff2")，并确保 Nginx / CDN 正确路由 - 次选方案：构建时通过 Webpack 的
publicPath或 Vite 的base配置统一前缀，再在 Less 里用变量拼接 - 别依赖
file-loader或url-loader自动处理 CSS 中的url()—— qiankun 的样式沙箱会绕过这些 loader 的重写逻辑
最容易被忽略的一点：路径问题永远优先查 Network 面板里字体请求的实际 URL 和状态码，而不是反复改 Less 变量。404 就调路径，CORS 就配响应头，乱码八成是 font-family 名不匹配或没加 format("woff2")。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
