Next.js：如何导入第三方模块（css /图像）？

Question

在components/Header.jsx中，我有以下自定义CSS导入：

import '@dtbaker/my-shared-package/main.css'

可以在其他项目（Gatsby / WordPress）中正常工作。

我试图在Next.js中使它工作并收到以下错误：

ModuleNotFoundError: Module not found: Error: Can't resolve 'images/653c75ef9be6b32befc9913aabfd6414.png' in 'node_modules/@dtbaker/my-shared-package'

文件node_modules/@dtbaker/my-shared-package/images/653c75ef9be6b32befc9913aabfd6414.png确实在本地存在。

我尝试过的事情：

1）在next.config.js

内部结合使用

const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const withImages = require('next-images')

2）在next.config.js和file-loader的组合中从工作的WordPress设置复制的url-loader中添加自定义Webpack规则，以尝试匹配.png图像文件

3）尝试在next.config.js中为我自己的scss / css加载程序添加自定义Webpack规则

main.css内容：

我要导入的CSS只是引用了这样的相对图像：

.Footer__logos___GRyec {
  background-image: url(images/653c75ef9be6b32befc9913aabfd6414.png);

下一步是什么？

我应该去哪个方向尝试解决这个问题？自定义webpack配置？一起废弃第三方模块吗？

任何想法表示赞赏！谢谢