PhpStorm does not recognise Sass files imported with usage webpack aliases

Question

I'm using PhpStorm 2018.2 for an Angular project (build with Webpack 4.16)

I set up aliases within webpack to import scss files like this:

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

In my scss files, I can do import like this:

@import '~styles/variables';

From a webpack point of vue, it is working great. But PhpSotrm is giving me an error:

Is this a missing feature in PhpStorm (I can see clearly here that this should be working for Webstorm)

This question describe the problem on webstorm but I could not find any explanation for PhpStorm.

So am I doing things wrong or is it a bug in PhpStorm ?

EDIT following Ru's answer:

1 If I change webpack.config.js to

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

and the code in a scss file to:

@import '#styles/_variables';

The errors is to be gone form phpStorm but webpack raise an error:

@import '#styles/_variables';
^
      File to import not found or unreadable: #styles/_variables.

2) If I use another symbol (I tried @ and $ and % and &) or no symbol, webpack raise an error and phpStorm raise an error...

3) If I use ~, it doesn't use the webpack alias (I removed the webpack alias and it works), so there is clearly something I don't get here. Why does webpack manage to find my variables.scss located within /src/styles folder when there is no alias defined in webpack....

prefixing the aliased path with `~` is a right way to go, your imports should just work... there is a known issue with partials (files with names starting with underscore): if underscore is omitted in import, and alias is being used, import can't be resolved (https://youtrack.jetbrains.com/issue/WEB-32760). But imports like `@import '~styles/_variables' should still work. If you have issues resolving them, please create a support ticket — lena, Jul 31 '18 at 14:33

Ru Chern Chong · Answer 1 · 2018-08-03T10:09:42.357

1

~ is an alias for node_modules folder, so in this case you are using two alias which the program might not be able to understand. You should try adding a symbol prefix to styles for your alias. E.g. #styles You can then use @import '#styles/variables';

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

Use the above code as an example only.

edited Aug 03 '18 at 10:09

answered Jul 31 '18 at 10:44

Ru Chern Chong

3,692
13
33
43

1

prefixing the import path with `~` is required, see https://webpack.js.org/loaders/sass-loader/#imports, https://stackoverflow.com/questions/34717203/webpack-with-sass-loader-scss-file-import-does-not-recognize-resolve-alias; and imports like `@import '~alias/file_name';` should be resolved by the IDE – lena Jul 31 '18 at 14:35
@Tonio can I check with you if you have `path` installed as package in `devDependencies`? If so, I would go ahead and revise my answer for a proper fix :) – Ru Chern Chong Aug 03 '18 at 10:20
I don't have a package called path installed, However, if I do "const path = require('path');" in webpack.config.js I will get an instance of path defined in "node" package (I think) – Tonio Aug 03 '18 at 10:37

Julesezaar · Answer 2 · 2023-02-03T14:02:41.960

I added this to my config to include the root path (which was 2 folders up)

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // Add the path from this file to the folder from where you want to do an @import from
        includePaths: ['./../../'],
      },
    },
  },
}

And then just remove the tilde

@import 'top/level/folder/to/styles/';

Worked for me, but ./../../ for me is also the root of the entire project. Maybe the reason that it worked for me is that this folder is the root. And so PHPStorm always recognizes the root path.

PhpStorm does not recognise Sass files imported with usage webpack aliases

2 Answers2