Webpack not loading font from plugin in Rails

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