SCSS import paths cannot be resolved

This has been a problem for me and my co-workers as well using PHPStorm. Is this being looked into?

The thing is I can't even suppressing the inspection for this

I've the same problem too... is there any solution for this?

Just found this issue today... yeah, no 'settings' for scss files where I can add a resolution path for the checker..

I was just looking for it today. A very much needed feature!

PHP Storm 2018.2.5

same here...

Cannot find variable 'var_name'

or on another project a bit better:

Element 'var_name' is resolved only by name without use of explicit imports

Here an example in even the same file where my scss vars are set:

There is no base path style file configuration or something??

OK. just had my theme folders marked as excluded... was the reason vars where not found.

I have a solution. You need to right-click a directory that is a PARENT of directories from which you import. So if your imports look like:

@import "base/colors";

then you need to do that for the parent of base. Then, choose "Mark directory as" -> "Resource root".

Well i did that but it didn't help either. The main issue here was that dependencies from other maven modules could not be resolved among several other issues with the SCSS import path resolving.

One thing that improved the situation for me was to add the module that contains the imported files as a dependency of the module that imports them. 

e.g. if you have a module frontend-base that contains the grid and variables and a module frontend-components then you have to mark the folders as resource roots in base and add base as a module dependeny of components.

This can be configured in Project Settings -> Modules -> (choose module) 

in the first tab "sources" you can mark the folders

in the third tab "dependencies" you can ad another maven module as a dependency.

The result is, at least for me, that the mixins and variables can be resolved (not always correctly but mostly) and clicking on them with ctrl+click forwards to the files. However, the imports themselves still are marked as "Cannot resolve file..."

Works for me.

Works for me too in Phpstorm 2019.3.1

Mark a directory as source works for JS imports, not SCSS imports.

The import below is not resolved by IntelliJ even if the parent directory is marked as source (but it is working with webpack):

@import 'style/common';

And the import below is resolved buy IntelliJ but is not working with webpack:

@import '/style/common';

Any idea ?

Marking the directory as Resource Root solved the issue for me (I had also to reopen the SCSS file to see the error gone).

In our case, we were using a company-owned package that contained many common variables, functions, mixins, etc., for .scss files. Trying to follow some advice from this post, I went to the package in the project explorer in WebStorm, found my package under node_modules, so it was like:

`node_modules -> <our-library> -> design-tokens -> dist -> web`, and in there were my style files. Right-clicked on that web directory, "Mark Directory as" -> "Not Excluded".

Works like a charm. Thanks all!

To expand on earlier suggestions by @... and @... (because it wasn't immediately clear to me...): in Project Explorer, I right-clicked on the node_modules directory (the parent to @angular, the directory referenced in my @Use/@Import statements), and from the context menu selected "Mark Directory as" --> "Resources Root". This immediately solved the problem for me.

This made a change to the .iml file for the relevant module (in IntelliJ):

<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
  <component name="NewModuleRootManager" inherit-compiler-output="true">
    <exclude-output />
    <content url="file://$MODULE_DIR$">
      ...
      <sourceFolder url="file://$MODULE_DIR$/node_modules" type="java-resource" />
      ...
    </content>
  </component>
</module>

Yeah, some weird behavior now, maybe with the newest version of WebStorm (I now am working with 2021.3.1). My previous solution doesn't work, but very strangely enough, marking the directory as Resources Root does nothing for me - I have to mark the directory as Test Resources Root. Whaaaaaaat?

So yeah now this works for me:
`node_modules -> <our-library> -> design-tokens -> dist -> web`, and in there were my style files. Right-clicked on that web directory, "Mark Directory as" -> "Test Resources Root".

Weird. After playing around with it a bit more, I Marked the directory as "Test Resources Root" (it was already marked as "Not Excluded"), which resolved the issue. Then, I marked the directory as "Excluded", which broke the resolutions again. Selected Mark directory as "Cancel Exclusion" and now it is not a Test Resources Root, just Not Excluded and.... The resolutions are working.

?

Lacaute Yannick I am facing the exact same issue. Have you found a solution?

I have created a StackOverflow question with more explanation. 

The @...'s suggestion worked for me.

Just marked the project root directory as Resource Root and the warnings went away in all SCSS files.

Direct Link to his suggestion:

https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000048404/comments/360000163840