Исправить загрузку ресурса Font Awesome в webpack

Если вы создаете проекты веб-пакетов, которые не являются шаблоном, и хотите включить Font Awesome, вы можете столкнуться с ошибкой при компиляции их версии SASS.

Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot'

Ошибка повторяется для других файлов шрифтов, включенных в библиотеку Font Awesome.

Проблема в том, что sass-loader не может самостоятельно разрешить относительные пути для модулей webpack. Font Awesome SCSS загружает ресурс шрифта, например: url(../fonts/fontawesome-webfont.eot). Таким образом, webpack ищет ресурс в базовом каталоге и не находит его.

Одно из решений - изменить указанную в проекте переменную$fa-font-path. Однако это не решит проблему универсально для всех поставщиков пакетов.

Единственное правильное решение - дополнить конвейер связывания SASS включением другого загрузчика перед sass-loader для преобразования относительных путей в url() адресах CSS.

Это решает resolve-url-loader. Это было сделано специально для решения проблемы с sass-loader. Как указано в документации, загрузчик должен быть включен перед sass-loader, а все загрузчики, предшествующие преобразователю URL, должны сгенерировать исходную карту.

В моем случае правило webpack для SASS выглядит так:

rules: [
  {
    test: /\.scss$/,
    use: [
      {
        loader: 'css-loader',
        options: {
          sourceMap: true
        }
      },
      {
        loader: 'resolve-url-loader'
      },
      {
        loader: 'sass-loader'
      }
    ]
  }
]

Надеюсь, это было полезно, и вы поняли проблему, вызвавшую ошибку. Есть и другие статьи об этом решении, но ни в одной из тех, что я прочитал, не упоминались требования resol-url-loader и недостатки sass-loader.