Webpack не будет загружать относительные изображения из модуля узла css

Question

Я пытаюсь импортировать css (и через него относительный путь к изображению) из модуля узла.

Добавление пакета npm работает нормально,

yarn add @claviska/jquery-minicolors

Импорт cssработает нормально,

@import '~@claviska/jquery-minicolors/jquery.minicolors';

Но затем, когда я просматриваю свой сайт, я получаю следующую ошибку веб-пакета:

Module not found: Error: Can't resolve './jquery.minicolors.png'

Это неверный путь к изображению из css:

.minicolors-sprite {
  background-image: url(jquery.minicolors.png);
}

Файлы css, image и js находятся в одной папке npm:

node_modules/@claviska/jquery-minicolors/jquery.minicolors.css node_modules/@claviska/jquery-minicolors/jquery.minicolors.png node_modules/@claviska/jquery-minicolors/jquery.minicolors.js

Если я скопирую это изображение из /node_modules и вставьте его в мою папку webpack /css, тогда все будет работать!

Как я могу научить webpack загружать относительные пути изображений из css, включенного в мои пакеты node_module?

Answer 1

Нашел разумное решение, хотя, возможно, есть и лучшие.

Перенес мой импорт CSS из моего основного файла scss src/application.scss

@import '~@claviska/jquery-minicolors/jquery.minicolors';

в мой основной файл js packs/application.js

// Import js
import '@claviska/jquery-minicolors';
// Import css
import '@claviska/jquery-minicolors/jquery.minicolors.css';

Возможно, что импорт js и css должен находиться в одном документе, чтобы веб-пакет обнаружил проблемный относительный путь к изображению url(jquery.minicolors.png).

Хотелось бы услышать другие предложения.