tome tome - 26 days ago 19
Sass (Sass) Question

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

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

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

Comments