Webpack 不会从节点模块 css 加载相关图像答案

【问题标题】：Webpack won't load relative images from node module cssWebpack 不会从节点模块 css 加载相关图像
【发布时间】：2019-07-13 17:05:12
【问题描述】：

我正在尝试从节点模块导入 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 加载相对图像路径？

【问题讨论】：

标签： javascript jquery css npm webpack

【解决方案1】：

找到了一个合理的解决方案，尽管可能有更好的解决方案。

从我的主 scss 文件 src/application.scss 移动我的 css 导入

@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)。

很想听听其他建议。

【讨论】：