WebStorm does not recognize Sass files imported using webpack aliases
I am using webpack 2 with sass-loader
in my project and I need to import some global Sass files (in my Sass variable files) in my component style files. I don't want to write a relative path for global files, I want to use an absolute path instead.
i.e. I want to write
@import "~styles/variables";
instead
@import "../../../variables"
For this I am using an alias for the "styles" directory in my webpack config
resolve: {
...
alias: {
'styles': helpers.root('src/styles'),
}
}
This all works as I expected and webpack compiles Sass correctly. But WebStorm doesn't understand imports with tilde and underlines this import with an error.
I have already specified in the WebStorm settings what src
is my original root directory.
How can I solve this?
source to share
This permission is currently not supported in current versions (ATM 2017.1).
Follow these tickets (star / vote / comment) to be notified of any achievements.
- Sass: https://youtrack.jetbrains.com/issue/WEB-25321
- LESS: https://youtrack.jetbrains.com/issue/WEB-23707
- More general ticket: https://youtrack.jetbrains.com/issue/WEB-17533 (base for the first two tickets)
source to share
The issue has been fixed in PHPStorm (probably WebStorm too) since 2017.2.2.
More information can be found here as stated above.
The aliases work fine, but if you are not using Webpack
(like a project Angular CLI
) you can create a fake webpack.config.js
file in the project root and fill it with the appropriate aliases to make the IDE resolve your files.
Here's a 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"
}
}
};
source to share