Webpack не собирается из-за относительного импорта из node_modules

Question

У меня проблема с импортом библиотеки из node_modules в мою сборку. Возможно, я подхожу к этому неправильно, однако проблема заключается в следующем:

1. bundle.s css импортирует библиотеку из node_modules (@import '~bootstrap-fileinput/scss/fileinput.scss')
2. Файл fileinput.css импортирует изображение в библиотеку, используя относительный path: url(../img/loading.gif)
3. Веб-пакет не может быть собран, поскольку не удается найти изображение loading.gif

Мне удалось импортировать файл изображения непосредственно в свой пакет .s css file, скопируйте его в мой файл dist / assets с помощью загрузчика файлов и настройте оператор импорта. Однако я не могу сделать это с внешним файлом S CSS, который я импортирую.

webpack.config. js:

{ 
  test: /\.(png|jpg|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        path: "..",
        outputPath: 'assets',
        publicPath: './assets',
        useRelativePath: true
      }
    }
  ] 
}

bundle.s css

.test {
  background: url(../assets/img/loading.gif);
  background: url(~bootstrap-fileinput/img/loading-sm.gif);
}

Приведенная выше конфигурация будет правильно 1) создавать файлы ресурсов в папке dist/, включая соответствующие подпапки, и 2) настраивать операторы импорта в bundle.css, чтобы они соответствовали новый путь.

Проблема в том, что, как только я импортирую внешнюю библиотеку, используя @import '~bootstrap-fileinput/css/fileinput';, я получу эту ошибку:

Module not found: Error: Can't resolve '../img/loading.gif'

fileinput .s css

$url-0: url(../img/loading.gif) !default;
$url-1: url(../img/loading-sm.gif) !default;

У кого-нибудь есть предложения по решению этой проблемы?