Vue Loader images in node modules third party css are not resolved

Question

I'm using webpack to build my vue.js app, and everything is fine until images are found into imported a node_module css file. They cannot be resolved.

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

where in vue.less

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

Can't resolve './my_image.png'

Adding url=false to vue-loader is an option

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

but it breaks the ExtractTextPlugin...

How can I tell vue-loader to look in the right folder? Or, how can I tell webpack to, please, don't try to resolve images path as modules at all ?

Could you share where its looking fo those images vs. where they are? Also, to be clear: this only happens in the prod build? dev server runs fine and shows the images? What's the config for the loade that loads image s(file-loader / url-loader)? — Linus Borg
Maybe the alias option of css-loader can help you? github.com/webpack-contrib/css-loader#alias — Linus Borg
I would test with alias @LinusBorg, in the meanwhile, as I'm not interested in resolving images as modules by webpack, I've found a quicker solution. — Daniele

Daniele Daniele · Accepted Answer · 2017-11-20T10:30:28

As I'm not interested to resolve my images as modules by webpack I've found that this extra option in loader is a quick win.

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

Vue Loader images in node modules third party css are not resolved

1 Answers