Конвейер ресурсов Rails, работающий со шрифтами и пряжей

Думаю, я нашел самое чистое решение после нескольких попыток:

Попытка 1: Sass и перезапись каталогов шрифтов

Я сделал довольно обширный рефакторинг модулей sass в каталоге app/assets/stylesheets. Вот пара примеров:

Для шрифтов

// sass_font_awesome.scss
$fa-font-path: "font-awesome/fonts";
@import 'font-awesome/scss/font-awesome';
@font-face {
  font-family: 'FontAwesome';
  src: asset-url('#{$fa-font-path}/fontawesome-webfont.eot');
  src: asset-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    asset-url('#{$fa-font-path}/fontawesome-webfont.woff2') format('woff2'),
    asset-url('#{$fa-font-path}/fontawesome-webfont.woff') format('woff'),
    asset-url('#{$fa-font-path}/fontawesome-webfont.ttf') format('truetype'),
    asset-url('#{$fa-font-path}/fontawesome-webfont.svg?#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Для изображений

// sass_multiselect.scss
$ms-img-path: 'multiselect/js/img';
@import 'multiselect/css/multi-select';
.ms-container{
  background: transparent asset-url('#{$ms-img-path}/switch.png') no-repeat 50% 50%;
  width: 370px;
}

Этот подход все еще не работал, когда папка node_modules была предварительно скомпилирована. На самом деле все скрипты node cli имели некоторые проблемы с синтаксисом для Ugflifier.

Попытка 2. Установите Webpack и создайте файл app/javascripts/pack/application.sass.

@import '~font-awesome/scss/font-awesome'
@import '~multiselect/css/multi-select'

Я все еще сталкивался с некоторыми проблемами с относительными путями. Я нашел решение в документации webpacker, добавив в свой config/webpacker/environment.js следующий загрузчик:

// webpack/environment.js
const { environment } = require('@rails/webpacker')

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader',
  options: {
    attempts: 1
  }
});

Решение: самый простой способ

Наконец-то я узнал поведение драгоценного камня webpacker по умолчанию, и это было очень просто:

// app/javascripts/packs/styles.js
import 'font-awesome/scss/font-awesome.scss';
import 'multiselect/css/multi-select.css';

Это компилируется в связанный файл styles.css без необходимости в каком-либо дополнительном загрузчике.

Мне потребовалось довольно много времени, чтобы понять это, и я надеюсь, что это будет полезно и вам!

Я заставил это работать, переопределив пути шрифтов.

приложение.scss:

$fa-font-path:"font-awesome/fonts";

@import 'font-awesome/scss/font-awesome';

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
  font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
  font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
  font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
  font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  //  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

Запустите rake assets:precompile, и вы должны увидеть файлы шрифтов в public/assets/font-awesome/fonts с переваренными именами файлов.

Скомпилированный CSS должен получить доступ к файлам шрифтов из ресурсов Rails:

@font-face{
   font-family:'FontAwesome';
   src:url(/assets/font-awesome/fonts/fontawesome-webfont-7bfcab6db99...979.eot?v=4.7.0)