Как загрузить локальные шрифты с помощью @ rails / webpacker?

У меня возникла проблема с загрузкой локальных файлов шрифтов с помощью @ rails / webpacker. Шрифты загружаются в среду разработки, но не в производственную среду. Это кажется действительно простой проблемой, но у меня было так много проблем с ней. Ниже мой код @ font-face. Мои шрифты хранятся в app / assets / images / fonts

приложение> активы> таблицы стилей> конфигурация> _fonts.scss

@font-face {
  font-family: "Axiforma";
  src: url("fonts/Kastelov-AxiformaRegular.eot"); /* IE9 Compat Modes */
  src: url("fonts/Kastelov-AxiformaRegular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Kastelov-AxiformaRegular.otf") format("opentype"), /* Open Type Font */
    url("fonts/Kastelov-AxiformaRegular.svg") format("svg"), /* Legacy iOS */
    url("fonts/Kastelov-AxiformaRegular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Kastelov-AxiformaRegular.woff") format("woff"), /* Modern Browsers */
    url("fonts/Kastelov-AxiformaRegular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 400;
  font-style: normal;
}

Получение файлов шрифтов в рабочем режиме приводит к ошибке 404. Когда я предварительно компилирую ресурсы, я вижу, что файлы шрифтов имеют хэш, добавленный к имени файла. В файле css, доставленном в браузер, URL-адрес файлов шрифтов остается неизменным. Чтобы попытаться исправить это, я попытался использовать file-loader, url-loader и resolve-url-loader в правилах модуля среды, но безрезультатно. Ниже моя попытка в файле конфигурации webpack.

конфигурация> webpack> environment.js

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
);

environment.module = {
  rules: [
    {
      test: /\.(scss|sass|css)$/i,
      use: [
        { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production' } },
        { loader: 'postcss-loader', options: { sourceMap: true } },
        'resolve-url-loader',
        { loader: 'sass-loader', options: { sourceMap: true } }
      ]
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        {
          loader: 'file-loader',
          limit: '100000'
        }
      ],
    },
    {
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      use: [
        {
          loader: 'url-loader',
          limit: '100000'
        }
      ]
    }
  ]
};

module.exports = environment;

Любая помощь будет принята с благодарностью :)


ruby-on-rails postcss-loader webpacker font-face
person einar_j    schedule 04.11.2019    source источник
comment
можете ли вы попробовать эти два решения: makandracards.com/makandra/   -  person Nezir    schedule 05.11.2019
comment
Должны ли шрифты проходить через конвейер ресурсов? Конечно, они не будут регулярно меняться, не могли бы они поэтому жить в каталоге public?   -  person olvado    schedule 05.11.2019
comment
@olvado Да, вы совершенно правы, спасибо. Они должны жить в общедоступном каталоге. Я новичок в веб-разработке, поэтому спасибо!   -  person einar_j    schedule 07.11.2019

Ответы (1)


arrow_upward
7
arrow_downward

Я работаю с Rails 6.0.3, и мне пришлось сделать следующее, чтобы использовать собственные шрифты:

  1. Создайте папку шрифтов: app/javascript/application/fonts и поместите туда мои шрифты (miso-bold.ttf и miso-bold.otf)

  2. В app/javascript/application/app.scss или ваш основной .scss файл я поместил следующее:

    @font-face {
  font-family: "Miso";
  src: url("./fonts/miso-bold.ttf") format("truetype"), url("./fonts/miso-bold.otf") format("opentype");
}

  3. В любом .css вы можете использовать это:

    .someclass {
  font-family: "Miso";
}

Стоит отметить, что Webpacker должен быть настроен для включения файлов шрифтов (чаще всего .otf и .ttf). Проверьте webpacker.yml.

person Santiago Martí Olbrich    schedule 22.06.2020