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

#шрифты #webpack #scss

Пользуясь гайдами, пытаюсь собрать все свои стили в одну сборку на Webpack.
Имеется главный файл, в него импортируется другой, в котором несколько правил @font-face
с путями к файлам шрифтов. При сборке Webpack выдаёт ошибку по этим путям, говорит:
нужен специальный загрузчик:


  ERROR in ./fonts/a_coppergothcaps-bold.ttf Module parse failed:
  Unexpected character ' ' (1:0) You may need an appropriate loader to
  handle this file type. (Source code omitted for this binary file)


Но мне не то чтобы нужно (или нужно?) добавлять эти файлы в сборку. Мне достаточно,
если в сборке останутся эти правила, и браузер сам подключит шрифты по ссылкам в них.
Как сказать Webpack, чтобы не пытался обрабатывать эти пути, но просто вставлял их,
как есть? 
Или я неправильно вижу решение проблемы? Может, я шрифтами неправильно распоряжаюсь?

Вот такие правила в конфиге: 

module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },

    

Ответы

Ответ 1

Ссылка на полный конфиг  

Вот мой способ подключения шрифтов для SCSS:

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    use: [
             {
                 loader: 'file-loader?name=./assets/fonts/webfonts/[name].[ext]'
             },
             {
                 loader: 'file-loader?name=./assets/fonts/Roboto/[name].[ext]'
             }
         ]
}




Что бы это заработало нужно установить file-loader

После этого нужно загрузить шрифты в SCSS:

@font-face {
    font-family: 'Roboto Black';
    src: url("/fonts/Roboto/Roboto-Black.ttf");
}




Настройки webpack-dev-server:

devServer: {
        contentBase: [path.resolve(__dirname, "build"), path.resolve(__dirname, "assets")],
        compress: true,
        port: 4200,
        historyApiFallback: true,
        noInfo:true
}  




UPDATE 1

У меня описания шрифтов находятся в файле src/fonts.scss и файл src/variable.scss
для хранения переменных размеров, цветов и т.п.
В variable.scss импортируется fonts.scss -> @import "/fonts.scss"; и после этого
в любом другом файле стилей можно импортировать variable.scss.
В определении шрифтор должен указываться не относительный путь до файла, а url.
Можно протестировать корректность вводимого адреса в браузере, например http://localhost:4200/fonts/Roboto/Roboto-Black.ttf,
если было предложено сохранить файл значит все правильно.


Ответ 2

module: {
rules: [
     {
  test: /\.(svg|png|gif|jpg)$/,
  exclude: /fonts/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]'
  }
}, {
  test: /\.(ttf|eot|woff|svg|woff2)$/,
  use: {
    loader: "file-loader",
    options: {
      name: `${PATHS.assets}css/fonts/[name].[ext]`,
    }
  }
},plugins: [
new CopyWebpackPlugin([{
  from: `${PATHS.source}/img`,
  to: `${PATHS.assets}img`
}, {
  from: `${PATHS.source}/static`,
  to: ''
}])
]}


Дабы избежать конфликта, я сделал так, благодарю что подняли этот вопрос, а также
за данные на него ответы.