Vue: @ alias doesn't resolve correctly in style tag in .vue files

[thezealousfool]

What problem does this feature solve?

In webpack.base.config the @ alias is defined as:

...
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
         'vue$': 'vue/dist/vue.esm.js',
         '@': resolve(src)
    }
},
...

But when I use the @ alias in a style tag in a .vue file it doesn't seem to work.

<style lang="scss" scoped>
    @import "@/styles/variables";
    ...
</style>

I get the error
File to import not found or unreadable: @/styles/variables.

PS: I am using a src/styles/_variables.scss file to store sass variables which I am importing in every .vue file. I would love to know if there is some other way of importing the variables file in every component using sass-loader or style-loader.

Thanks

What does the proposed API look like?

<style lang="scss" scoped>
    @import "@/styles/variables";
    ...
</style>

[Akryum]

Try @import "~src/styles/variables";

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server, gitter or StackOverflow.

---

This has nothing to deal with vue itself
@Akryum was faster to give you an answer 🙂

[Akryum]

This is related to webpack indeed.

[thezealousfool]

@Akryum @import "src/styles/variables"; works but not @import "~src/styles/variables";

@posva I asked it here because I thought that the @ alias should work in the style tag too.

[LinusBorg]

@vivek-roy but this is the repository for Vue.js, the library, not for the webpack template, and your problem is about webpack, not Vue.

You can find the template's repo here: http://github.com/vuejs-templates/webpack

[EastSun5566]

@thezealousfool
You can use @import "~@/styles/variables";, don't need to set another alias.
@ is vue default alias & ~ tell webpack that this is not a relative import.

[diazemiliano-zz]

Thanks @EastSun5566 !

[zhaoboxiang]

Thank you very much @EastSun5566 it work for me, Great!