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

Posted 2023-02-15

【中文标题】Webpack没有从Rails中的插件加载字体

【英文标题】：Webpack not loading font from plugin in 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的参数是什么

如何正确加载样式表？

【参考方案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