How to deal with relative image path in subdirectories when using @import scss for IntelliJs autocompletion?

Question

I like the autocompletion feature of Webstorm, Phpstorm and Intellij and the other jetbrain-products. It doesn't work however if I have a structure like this:

img/my-img.jpg
sass/main.scss
sass/component/_component.scss

// sass/main.scss:
 @import "/component/component"     

// _component.scss:
.class{
   //  => autocomplete doesn't work here as desired <=

   // how intellij completes it
   background: url(../../img/my-img.jpg)

   // what i would like to have instead
   background: url(../img/my-img.jpg)    
}

Is there some way of telling IntellJ how to use the sass folder as base for the autocompletion of images and to get rid of the annoying error notice?

Answer 1

You can mark img folder as resourse root.

From jetbrains documentation:

Files under a folder marked as Resource Root can be referenced relative to this folder.