webpack path aliases for <style></style> in Component.vue files

[yyx990803]

Moved from vuejs/vue#7400

What problem does this feature solve?

Basically today I noticed that webpack aliases work properly for import statements, however not with <style> </style> section of .vue component. Example given: '@': './src' alias works fine with import smth from '@/smth' in <script> </script> section, but when i tried this: <style> .jumbotron { background: url('@/assets/images/welcome.jpg') center / cover; } </style> it failed, I thought it would be great to be able to write code this way, so Component.vue works even if its location changes. That would be super cool. Btw I love Vue, thanks a lot for a great work!

**webpack aliases for .vue <style></style> section

What does the proposed API look like?

<style> .jumbotron { background: url('@/assets/images/welcome.jpg') center / cover; } </style>

[ghost]

Pulled a request #1139

[yyx990803]

Well... I just realized you can already do that with (prefix the url with ~)

<style>
.jumbotron {
  background: url('~@/assets/images/welcome.jpg') center / cover;
}
</style>

So extra processing in vue-loader is not really necessary.

[mfzl]

This does not work when image link is specified in inline style attribute as in vuejs/vue-cli#928

[dobromir-hristov]

I confirm.
Inline style background images do not work.
Using cli v3.0.0-beta.11