Using url(path) with resolve.alias

[SimenB]

I have a few images in a shared location, which I import in a css file. This shared location has a lot of code shared between 5 webapps within the same project, and I have defined the alias common-assets in my config, which works great for every asset/module, except for css. The path is normalized by css-loader (I think?) to be relative, which breaks.

Is there any clean way to use the alias, or do I have to go url("../../../../../../../../common/assets/images/image.png") instead of the much cleaner url("common-assets/images/image.png")? If I do the latter, the actual import becomes url("./common-assets/images/image.png"), which is wrong, and fails the build.

[sokra]

https://github.com/webpack/css-loader#usage

url("~common-assets/images/image.png")

[SimenB]

Ah, of course, that makes sense.
I was thinking that it only resolved modules (i.e. from node_modules),
but that it resolves things like modules makes much more sense.
Thanks!

[cj]

@sokra I tried this but I'm getting an error http://prntscr.com/afub2r am I missing something?

[cj]

I actually think this is a postcss/postcss-import issue, I've created a ticket there.

[mrdulin]

@sokra url("~common-assets/images/image.png") worked. But what's the meaning of ~ symbol?

[SimenB]

It means that it's a module and not a relative path

[j-u-p-iter]

Pretty cool! Is this documented somewhere?

[viT-1]

Pretty cool! Is this documented somewhere?

https://webpack.js.org/loaders/css-loader/#import