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?

@AndriiRomanchak I didn't resolve this problem because I have very complicated webpack configuration, but JetBrains teem added webpack config analyzer to WebStorm and it works fine. Look at https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/ — Andrii Golubenko, Sep 19 '17 at 12:05

score 6 · Accepted Answer · answered Apr 10 '17 at 13:36

6

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)

answered Apr 10 '17 at 13:36

LazyOne

158,824
45
388
391

Just updated to version 2017.2.4 and still getting the same error. The links say the problem is fixed – Andrii Romanchak Sep 19 '17 at 11:10
@AndriiRomanchak Please ask in the appropriate ticket or file new one if you are sure that you have configured all correctly but it still does not work. – LazyOne Sep 19 '17 at 11:17
My PHPStorm understands tilde with paths from `node_modules` folder but doesn't understand ones from `src` folder. My `src` is marked as a source root. Could you advise anything? – Andrii Romanchak Sep 19 '17 at 11:22
@AndriiRomanchak Unfortunately not -- I'm not using webpack at all so have no ideas on what can be done here. You may ask on WebStorm forums though: https://intellij-support.jetbrains.com/hc/en-us/community/topics/200367229-WebStorm – LazyOne Sep 19 '17 at 11:35

Andrii Romanchak · Answer 2 · 2018-04-04T12:23:22.257

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"
    }
  }
};

WebStorm does not recognize Sass files imported with usage webpack aliases

2 Answers2

Linked