Webpack меняет путь к шрифтам?

Question

[Михаил]

Уже не один день пытаюсь решить проблему подключения шрифтов в webpack.

Вылетает ошибка:

Failed to decode downloaded font: http://localhost:4300/fonts/Montserrat//montserrat_alternates_black..woff

И
OTS parsing error: invalid sfntVersion: 1702391919

Мне непонятно откуда берется этот путь:

http://localhost:4300/fonts/Montserrat//montserrat_alternates_black..woff

После Montserrat проставлен двойной / и в конце пути 2 точки перед расширением -..woff

В действительности шрифт находится в папке src/Montserrat/montserrat_alternates_black.woff
После сборки шрифты копируются в папку dist

структура проекта:
|-dist
| |-fonts
| |-montserrat_alternates_black.woff
|
|-src
|-fonts
| |-Montserrat
| |-montserrat_alternates_black.woff
|-css
|-fonts.sass
|-main.sass

Шрифты подключаются в fonts.sass:

@font-face
    font-family: 'Montserrat'
    src: local('Montserrat'), 
    url("../fonts/Montserrat/montserrat_alternates_black.woff") format('woff'),
    url("../fonts/Montserrat/montserrat_alternates_black.ttf") format('truetype'),
    url("../fonts/Montserrat/montserrat_alternates_black.svg") format('svg')
    font-weight: normal
    font-style: normal

fonts.sass подключается в main.sass:

@import "fonts.sass"

body
    font-family: 'Montserrat', sans-serif

Код сборки шрифтов

{
                test: /\.(ttf|otf|eot|woff|woff2|svg)$/,
                use: [
                    {
                       loader: 'url-loader',
                       options: {
                           limit: 10000,
                           name: `fonts/[name].[ext]`,
                           publicPath: 'http://localhost:4300/',
                        },
                    },
                ]
            },

Уже который день ломаю голову и не могу понять в чем проблема. Сегодня удалось загрузить Montserrat ненадолго, когда сменил лоадер с file-loader на url-loader, но потом все также неожиданно поломалось

help

Answer 1

[As Bars]

Вы используйте loader modules? Они устарели, была аналогичная проблема с file-loader module. перешел на Asset Modules и ошибка исчезла.

для примера

rules: [
  {
    test: /\.woff2?$/i,
    type: 'asset/resource'
    dependency: { not: ['url'] },
  }, 
]