javascript - WebStorm does not recognize Sass files imported with usage webpack aliases - Stack Overflow

admin管理员组

文章数量:1287651

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 ponent 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 pile 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?

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 ponent 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 pile 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?

• javascript
• css
• sass
• webpack
• webstorm

Share Improve this question Follow edited Apr 10, 2017 at 13:31 LazyOne 165k4747 gold badges414414 silver badges415415 bronze badges asked Apr 10, 2017 at 13:21 Andrii GolubenkoAndrii Golubenko 5,17911 gold badge2525 silver badges2929 bronze badges 2

• Hi, having the same problem. Have you solved it? – Andrii Romanchak Commented Sep 19, 2017 at 11:13
• 1 @AndriiRomanchak I didn't resolve this problem because I have very plicated webpack configuration, but JetBrains teem added webpack config analyzer to WebStorm and it works fine. Look at blog.jetbrains./webstorm/2017/06/… – Andrii Golubenko Commented Sep 19, 2017 at 12:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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

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

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

本文标签： javascriptWebStorm does not recognize Sass files imported with usage webpack aliasesStack Overflow