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?

Perhaps adding information about the directory structure of the project, especially the files mentioned, would help. — Nikos Paraskevopoulos, Jan 11 '16 at 08:54
A very quick observation - may be irrelevant: the directory `styles` is included both in `alias.styles` as `path.join(..., 'app/styles')` and in the import as `@import "styles/variables"`. It may need to be `@import "variables"`. — Nikos Paraskevopoulos, Jan 11 '16 at 09:36
@NikosParaskevopoulos That is the way that an alias is defined and used in webpack - https://webpack.github.io/docs/configuration.html#resolve-alias — tome, Jan 11 '16 at 13:00
@Tarlen - nope, still no solution. currently I just use the relative path in the sass file import, without referring to the alias.. — tome, Jan 22 '16 at 13:52

score 101 · Accepted Answer · edited Jan 04 '17 at 13:44

101

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

edited Jan 04 '17 at 13:44

Yves M.

29,855
23
108
144

answered Apr 13 '16 at 11:11

BenR

1,179
1
8
5

7

This works great but how do you get your editor to stop complaining about it. Obvisouly ~alias directory doesn't exist. – tkiethanom May 18 '17 at 20:58
@tkiethanom for you and anyone else who comes across this answer, see CrocoDillon's answer. Basically, if your config file looks exactly the same as his, you would use: `@import '~styles/variables';` – A. L Sep 10 '18 at 06:35
@tkiethanom Not sure about other editors, but IntelliJ/PhpStorm will use webpack.config.js to resolve imports, so it recognizes aliases. – Nathan Dec 31 '18 at 04:39
3

Using `~` is **deprecated** and can be removed from your code. – higimo Mar 12 '21 at 16:54

score 9 · Answer 2 · answered Nov 07 '16 at 21:23

9

Another fix related to this subject, remove .scss

@import '~scss/common.scss';

should be

@import '~scss/common';

answered Nov 07 '16 at 21:23

Kirk Strobeck

17,984
20
75
114

2018 and stuck at this. I'm using @material packages and they are all without tilde character!! so sass-loader gets stuck at subsequent imports. Tried adding an alias for `@material` and point to `path.resolve(__dirname, 'node_modules/@material')` with no luck. Asked a question https://stackoverflow.com/questions/48368639/vue-and-webpack-file-to-import-not-found-or-unreadable-material-ripple-commo – Jan 21 '18 at 17:22

score 3 · Answer 3 · answered Jan 11 '16 at 19:12

3

Since your webpack.config.js file is already in the /app folder, shouldn’t the alias be:

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

?

answered Jan 11 '16 at 19:12

CrocoDillon

126
5

Sorry, that was a mistake. Webpack.config is on the top level dir, edited question accordingly – tome Jan 11 '16 at 19:14
Okay, already thought that’d be too easy. I’d have commented instead of answered but not enough rep. – CrocoDillon Jan 11 '16 at 20:06

gedijedi · Answer 4 · 2018-08-09T14:35:54.833

In my case the dependency is a node module, therefore I can import it like this:

@import '~node-module-name/variables';

And when using the actual node module dir name, my editor (PhpStorm) is not showing unresolved path error anymore (the problem which @tkiethanom mentioned). It looks like I need to specify alias in webpack config if I want to use sass style imports (e.g. my-package/colors instead of my-package/_colors.scss), and it seems it doesn't matter what is the name of that alias, as long as I use node module directory name

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

4 Answers4

Linked

Related