Webpack不会从节点模块CSS加载相对图像

Question

我正在尝试从节点模块导入css（并通过它导入相对的图像路径）。

添加npm程序包可以正常工作

yarn add @claviska/jquery-minicolors

导入CSS效果很好

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

但是当我查看自己的网站时，出现以下webpack错误，

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从node_module软件包中包含的css中加载相对图像路径？

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导入可能需要位于同一文档中，以便Webpack发现有问题的相对图像路径url(jquery.minicolors.png)。

很想听听其他建议。