css - Webpack没有从Rails中的插件加载字体

Question

我是 Webpack 的新手，我正在尝试加载lightgallery通过yarn add.

我可以成功加载 JavaScript。但是，样式表在尝试加载字体时崩溃：

Error: Cannot find module '../fonts/lg.woff2?io9a6k'

它按如下方式加载：

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";

引导加载正常。

在lightgallery/scss/lightgallery.scss：

@import 'lg-variables';
@import 'lg-mixins';
@import 'lg-fonts';
@import 'lg-theme-default';

// Core
@import 'lightgallery-core';

在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;
}

该文件夹lightgallery/fonts包含文件，不确定参数?io9a6k的用途

如何正确加载样式表？

Answer 1

我使用resolve-url-loader修复了SCSS中的相对路径：

yarn add resolve-url-loader

在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