Rails环境下Webpack加载lightgallery插件字体文件找不到报错如何解决

报错本质是Webpack无法正确解析lightgallery字体文件的路径，两个核心原因：

1. lightgallery默认的$lg-path-fonts变量没有指向node_modules中字体文件的真实存放路径
2. 字体路径后的?io9a6k是官方添加的缓存清除哈希参数，用于避免旧版本字体缓存，Webpack默认的文件加载规则没有兼容带查询参数的资源路径，导致识别失败

步骤1：覆盖lightgallery的字体路径变量 #

修改app/assets/javascript/packs/application.scss，在导入lightgallery样式之前先定义路径变量：

// 变量声明必须放在导入lightgallery样式之前才能生效
$lg-path-fonts: '~lightgallery/fonts';
// 原有导入逻辑保持不变
@import "bootstrap";
@import "lightgallery/scss/lightgallery.scss";

其中~是Webpack默认配置的node_modules目录别名。

步骤2：调整Webpack加载规则适配带参数的资源路径 #

修改config/webpack/environment.js，更新文件加载器的匹配规则：

const { environment } = require('@rails/webpacker')

// 修改文件加载器的正则匹配规则，兼容带查询参数的资源路径
const fileLoader = environment.loaders.get('file')
fileLoader.test = /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2)(\?.*)?$/i

module.exports = environment

修改完成后重启Webpack dev server，重新编译资源即可恢复正常。

如果不想调整Webpack规则，可以手动迁移字体文件到Rails资产目录：

• 把node_modules/lightgallery/fonts下的所有字体文件复制到app/assets/fonts目录
• 将步骤1中的$lg-path-fonts变量值改为'/assets'即可

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