webpack (with sass-loader) - scss file @import does not recognize resolve alias

Question

My project structure:

webpack.config.js app--     --> src    ---->> components    ------>>> myComponent.js    ------>>> myComponent.scss     --> styles    ---->> variables.scss 

In webpack.config module.exports:

... resolve: {     alias: {        styles: path.join(__dirname, 'app/styles')     } } 

In my file - myComponent.scss:

@import "styles/variables"; 

I am getting this error when building bundle.js:

Module build failed: @import "styles/variables"; ^       File to import not found or unreadable: styles/variables 

How can I @import aliases in sass files?

Answer 1

I was able to use, on a stylesheet, an alias that I defined in webpack by using the following:

@import '~alias/variables'; 

just by prefixing the alias with ~ did the trick for me, as suggested by documentation in here