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
– Linus Borg, Commented Nov 20, 2017 at 10:11
Maybe the alias option of css-loader can help you? github.com/webpack-contrib/css-loader#alias — Linus Borg
– Linus Borg, Commented Nov 20, 2017 at 10:16
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, Commented Nov 20, 2017 at 10:27

E. S. · Accepted Answer · 2017-11-20 13:43:00Z

1

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',
      }),
    },
  },
},

edited Nov 20, 2017 at 13:43

E. S.

2,91920 silver badges23 bronze badges

answered Nov 20, 2017 at 10:30

Daniele

8471 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related