Внедрить новый шрифт в приложение React - Сбой при разборе модуля: неожиданный символ '@' (2:0)

Question

Я получил эту ошибку при запуске приложения:

index.css:1 Uncaught Error: Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
| /* roboto-100normal - latin */

До этого я добавил это в style.scss файл:

.homeText {
      color: #ffffff;
      font-size: 35px;
      font-family: 'Roboto', sans-serif;
      width: 70%;
    }

Я предполагаю, что это ищет Roboto файл шрифта, но я не знаю, как это закончить. Также в веб-пакете у меня есть:

{
  test: /(\.css|\.scss)$/,
  exclude: /node_modules/,
  include: [
    path.resolve(__dirname, './src/styles'),
  ],
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: "css-loader"
    },
    {
      loader: "sass-loader",
      options: {
        minimize: true,
        sourceMap: true
      }
    }
  ]
}, {
  test: /\.(jpe?g|png|gif)$/i,
  loader: "file-loader"
}, {
  test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
  loader: "file-loader"
}, {
  test: /\.(png|woff|woff2|eot|ttf|svg)$/,
  loader: 'url-loader?limit=100000'
}

Кто-нибудь знает, как решить эту проблему?