Ошибка Webpack при импорте шрифтов из npm

Question

Я работаю над проектом Vue SPA с помощью веб-пакета. У меня также был загрузчик для scss. У меня была проблема при импорте в scss из другого scss, установленного через npm, до сих пор я пробовал @fontawesome и flag-icon, оба из которых выдали мне ту же ошибку.

Первая ошибка, которую я получил, - ошибка, в которой говорится, что не удается разрешить шрифт:

ERROR in ./project/static/scss/dashboard/dashboard.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./project/static/scss/dashboard/dashboard.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' in '/var/www/python/django/django/project/static/scss/dashboard'
 @ ./project/static/scss/dashboard/dashboard.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./project/static/scss/dashboard/dashboard.scss) 7:351078-351117 7:351148-351187

Я попытался найти обходной путь, и обнаружил, что я должен использовать resolve-url-loader, который я попробовал, но это дало мне еще одну ошибку:

｢wdm｣: Error: illegal operation on a directory
at MemoryFileSystem.writeFileSync (/var/www/python/project/project/node_modules/memory-fs/lib/MemoryFileSystem.js:211:9)
at MemoryFileSystem.writeFile (/var/www/python/project/project/node_modules/memory-fs/lib/MemoryFileSystem.js:324:8)
at writeOut (/var/www/python/project/project/node_modules/webpack/lib/Compiler.js:339:29)
at asyncLib.forEach (/var/www/python/project/project/node_modules/webpack/lib/Compiler.js:349:7)
at baseEach (/var/www/python/project/project/node_modules/neo-async/async.js:2416:9)
at Object.each (/var/www/python/project/project/node_modules/neo-async/async.js:2843:9)
at emitFiles (/var/www/python/project/project/node_modules/webpack/lib/Compiler.js:312:13)
at Immediate.<anonymous> (/var/www/python/project/project/node_modules/memory-fs/lib/MemoryFileSystem.js:288:4)
at runCallback (timers.js:810:20)
at tryOnImmediate (timers.js:768:5)

На данный момент я не знаю, какое еще решение для этого. Я считаю, что это происходит, когда он пытается загрузить каталог webfonts.

Кто-нибудь знает исправление? Спасибо,

Это модуль, который я использую внутри моего webpack.config.dev.js:

module: {
rules: [
  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: "css-loader"
    }),
  },
  {
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
      use: [
        'css-loader',
        'resolve-url-loader',
        'sass-loader?sourceMap'
      ]
    })
  },
  {
    test: /\.sass$/,
    use: ExtractTextPlugin.extract({
      use: [
        'css-loader',
        'resolve-url-loader',
        'sass-loader?sourceMap'
      ]
    })
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
        // the "scss" and "sass" values for the lang attribute to the right configs here.
        // other preprocessors should work out of the box, no loader config like this necessary.
        'scss': [
          'vue-style-loader',
          'css-loader',
          'resolve-url-loader',
          'sass-loader?sourceMap'
        ],
        'sass': [
          'vue-style-loader',
          'css-loader',
          'resolve-url-loader',
          'sass-loader?sourceMap'
        ]
      }
      // other vue-loader options go here
    }
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  },
  {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
      name: '?[name].[ext]?[hash]',
      publicPath: '/assets/'
    }
  },
  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]

},