Webpack从依赖项目导入图像

Question

我有一个React组件库，该库依赖于第三方库。在此依赖库中，它们包含具有相对路径的图像：

# node_modules/third-party/dist/third-party.scss
.sort-indicator {
  background: url('../images/sort-asc.png')
}

在我的项目中，我有一个.scss文件，其中包含

@import '~third-party/dist/third-party.scss'

我一直在尝试使用url-loader，resolve-url loader和file-loader的各种方法，但是它们似乎都没有达到我的期望。我不断遇到如下问题，显然是在尝试从我的代码的目录结构中导入图像，而不是在模块的图像目录中查找：

Module not found: Error: Can't resolve '../images/sort-asc.png' in 'path/where/my/scss/file/resides.scss'

我当前的webpack如下：

...sniped for brevity...
rules: [
  { test: /\.scss$/,
    use: extractSASS.extract({
      use: [
        { loader: 'css-loader' },
        // { loader: 'resolve-url-loader' } // didn't work
        { loader: 'sass-loader' }
      ]
    })
  },
  // The below also didn't work
  // { test: /\.(png|gif)$/i, use: [{ 'url-loader?limit=5000' }] }

]