Как подключить шрифты в scss, чтобы webpack собирал без ошибки?

Для того чтобы подключить шрифты в SCSS и чтобы Webpack смог успешно собрать проект без ошибок, вам потребуется выполнить ряд шагов.

1. Сначала вам нужно установить необходимые шрифты в ваш проект. Для этого скопируйте файлы шрифтов в каталог вашего проекта, предпочтительно в папку "assets/fonts". Убедитесь, что файлы шрифтов имеют разрешения .ttf, .eot, .woff или .woff2.

2. Далее, вам нужно настроить загрузчик шрифтов в вашем конфигурационном файле Webpack. Добавьте модуль в файл webpack.config.js следующим образом:

module: {
  rules: [
    {
      test: /.(woff|woff2|eot|ttf)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }
      ]
    }
  ]
}

Этот код говорит Webpack, что если он обнаружит файлы шрифтов с расширениями .woff, .woff2, .eot или .ttf, он должен использовать загрузчик file-loader для копирования файлов в папку сборки и сохранения их под теми же именами.

3. После настройки загрузчика, вам нужно использовать импорты в вашем SCSS файле, чтобы подключить шрифт. Это можно сделать следующим образом:

@font-face {
  font-family: 'YourFontName';
  src: url('../path/to/your/font.woff') format('woff');
  /* дополнительные форматы, если требуется */
}

Вам нужно заменить '../path/to/your/font.woff' путем к файлу шрифта на вашей файловой системе.

4. Последним шагом является импорт вашего SCSS файла с шрифтами в основной SCSS файл вашего проекта. Пример:

@import 'path/to/your/fonts.scss';

Вам нужно заменить 'path/to/your/fonts.scss' на путь к вашему SCSS файлу с шрифтами.

После всех этих шагов, Webpack будет успешно собирать ваш проект, и шрифты будут правильно подключены в вашем SCSS.