Webpack没有从Rails中的插件加载字体答案

【问题标题】：Webpack not loading font from plugin in RailsWebpack没有从Rails中的插件加载字体
【发布时间】：2021-12-03 03:30:12
【问题描述】：

我是 Webpack 的新手，我正在尝试加载通过 yarn add 安装的插件 lightgallery 的样式表。

我可以成功加载 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的参数是什么

如何正确加载样式表？

【问题讨论】：

标签： css ruby-on-rails webpack lightgallery lightgallery-2

【解决方案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

【讨论】：