节点模块第三方 css 中的 Vue Loader 图像未解析答案

【问题标题】：Vue Loader images in node modules third party css are not resolved节点模块第三方 css 中的 Vue Loader 图像未解析
【发布时间】：2018-05-03 11:53:09
【问题描述】：

我正在使用 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，请不要尝试将图像路径解析为模块？

【问题讨论】：

你能分享一下这些图片的位置和它们的位置吗？另外，要明确一点：这只发生在产品构建中？开发服务器运行良好并显示图像？加载图片s(file-loader / url-loader)的loade的配置是什么？
css-loader 的alias 选项可能对您有帮助吗？ github.com/webpack-contrib/css-loader#alias
我会使用别名@LinusBorg 进行测试，与此同时，由于我对通过 webpack 将图像解析为模块不感兴趣，所以我找到了一个更快的解决方案。

标签： webpack vue.js vue-loader

【解决方案1】：

由于我对通过 webpack 将图像解析为模块不感兴趣，我发现加载器中的这个额外选项是一个快速的胜利。

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

【讨论】：