节点模块中的VUE加载器图像未解决第三方CSS

Question

我正在使用webpack来构建我的vue.js应用程序，并且一切都很好，直到将图像找到到导入的node_module css文件中为止。他们无法解决。

<style lang="less">
  @import '~@vue/vue';
</style>

在vue.less

中

@import (inline) "@{node_modules}/third_party_lib/unmodifiable.css";

无法解析'./my_image.png'

将url=false添加到vue-loader是一个选项

{
  test: /.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: prod,
    loaders: {
      less: 'vue-style-loader!css-loader?url=false!less-loader',
    },
  },
},

但它打破了extractTextplugin ...

如何告诉Vue-Loader在正确的文件夹中查看？或者，我该如何告诉WebPack，请不要尝试将图像路径完全解析为模块？

Answer 1

我不感兴趣地将图像作为WebPack的模块解决，我发现加载程序中的此额外选项是快速获胜的。

{
  test: /.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: prod,
    loaders: {
      less: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader?url=false!less-loader',
      }),
    },
  },
},