在Rails 7中使用jsbundling(esbuild)配置自定义字体时遇路由错误

你遇到的路由错误核心原因是：字体文件的路径解析逻辑错误，esbuild和Sass编译时未正确处理字体资源的输出路径，导致前端请求的路径无法匹配Rails的asset路由。以下是具体修复步骤：

1. 优化esbuild构建脚本 #

当前esbuild仅处理app/javascript下的文件，且未覆盖所有字体格式的loader。修改package.json中的build脚本：

"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --loader:.ttf=file --loader:.woff=file --loader:.woff2=file --loader:.eot=file",

• 新增.woff、.eot格式的loader，覆盖所有常见字体类型
• 确保--public-path=/assets指向Rails的静态资源根路径

2. 修正Sass编译的资源路径规则 #

Sass编译node_modules中的CSS文件时，字体路径默认是相对路径，需要强制转换为绝对路径匹配assets目录。修改build:css:compile脚本：

"build:css:compile": "sass --style compressed ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --asset-urls=absolute",

• --asset-urls=absolute会让Sass将所有资源URL转换为绝对路径，适配Rails的asset pipeline

3. 精简Font Awesome引入（可选） #

如果不需要Font Awesome的JS交互功能（如动态图标），可以移除application.js中的全量JS引入，仅保留样式引入即可：

// application.js 中删除此行（按需操作）
// import "@fortawesome/fontawesome-free/js/all"

4. 清理并重新构建资源 #

执行以下命令清理旧构建文件并重新编译：

# 删除旧构建产物
rm -rf app/assets/builds/*
# 重新构建JS和CSS资源
yarn build
yarn build:css
# 重启开发服务器
bin/dev restart

验证结果 #

重新启动服务器后，检查app/assets/builds目录下是否生成了对应的字体文件（如fa-brands-400.ttf、lora-latin-400-normal.woff），前端请求的字体路径会自动变为/assets/[字体文件名]，即可正确匹配Rails的路由。

内容的提问来源于stack exchange，提问作者Dmitry Tolstosheev