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

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 将图像解析为模块不感兴趣，因此我发现 loader 中的这个额外选项是一个快速的胜利。

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