WebStorm does not recognize Sass files imported with usage webpack aliases

Question

I use webpack 2 with sass-loader in my project and I need to import some global Sass files (in my case files with Sass variables) in component style files. I don't want to write relative path for global files, instead of this I want to use absolute path.

i.e. I want to write

@import "~styles/variables";

instead of

@import "../../../variables"

For this I use alias for 'styles' directory in my webpack config

resolve: {
 ...
  alias: {
    'styles': helpers.root('src/styles'),
  }
}

All this works as I expected and webpack compile Sass properly. But WebStorm does not understand import with tilde and underscores this import with error.

I already pointed in WebStorm settings that src is my Source Root directory.

How can I resolve this?

Answer 1

Such resolving is not currently supported in current versions (2017.1 ATM).

Watch these tickets (star/vote/comment) to get notified on any progress.

• Sass: https://youtrack.jetbrains.com/issue/WEB-25321
• LESS: https://youtrack.jetbrains.com/issue/WEB-23707
• More generic ticket: https://youtrack.jetbrains.com/issue/WEB-17533 (the base for the first 2 tickets)