Webpack not loading font from plugin in Rails - css

Question

I'm new to Webpack and I'm trying to load the stylesheet of a plugin lightgallery installed through yarn add.
I can successfully load the JavaScript. However, the stylesheet crashes when trying to load a font:
Error: Cannot find module '../fonts/lg.woff2?io9a6k'
It gets loaded as follows:
app/views/layouts/application.html.erb:
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
app/assets/javascript/packs/application.scss:
#import "bootstrap";
#import "lightgallery/scss/lightgallery.scss";
Bootstrap loads fine.
In lightgallery/scss/lightgallery.scss:
#import 'lg-variables';
#import 'lg-mixins';
#import 'lg-fonts';
#import 'lg-theme-default';
// Core
#import 'lightgallery-core';
In lightgallery/scss/_lg-fonts.scss:
#font-face {
font-family: 'lg';
src: url('#{$lg-path-fonts}/lg.woff2?io9a6k') format('woff2'),
url('#{$lg-path-fonts}/lg.ttf?io9a6k') format('truetype'),
url('#{$lg-path-fonts}/lg.woff?io9a6k') format('woff'),
url('#{$lg-path-fonts}/lg.svg?io9a6k#lg') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
The folder lightgallery/fonts contains the files, not sure what the parameter ?io9a6k is for
How can I get the stylesheets loading correctly?

Answer 1

I got it working using resolve-url-loader to fix relative paths in SCSS:
yarn add resolve-url-loader
In config/webpack/environment.js:
const { environment } = require('#rails/webpacker')
// https://github.com/sachinchoolur/lightGallery/issues/1039
// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader'
});
const webpack = require('webpack')
module.exports = environment