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.

ie 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)

Answer 2

The issue was fixed in PHPStorm (probably WebStorm too) since version 2017.2.2.

More info can be found here as it was pointed above.

Aliases work fine but in case you are not using Webpack (you have an Angular CLI project for example) you can create a fake webpack.config.js file in the project's root and fill it with appropriate aliases just to make the IDE resolve your files.

Here's the working example:

// fake webpack config used only to help make PHPStorm resolve imported .sass files
var webpack = require('webpack');

module.exports = {
  context: __dirname,

  // Directory resolution fix
  resolve: {
    alias: {
      sass: "/src/sass"
    }
  }
};