How to fix the issue with IntelliJ and PHPStorm not resolving SASS and JS Imports

This article describes how to resolve the issue with IntelliJ not providing autocomplete for imported SASS and JS resources. The same fix can be applied to PHPStorm.

IntelliJ is an awesome IDE, but recently it stopped recognising imported SASS and JS resources. This didn’t stop them from compiling, but was very annoying, as it flagged the resources, onscreen as being unrecognised

IntelliJ SASS resource not recognised

It took me a little while to find the fix, so I thought I’d share it to save others the hassle.

Marking the Resources’ Root

The fix is really simple, all that’s needed is to explicitly mark the resource’s root directory as a Resources Route. This is by right-clicking on the resource directory and selecting Mark Director as > Resource Root.

IntelliJ - setting the resource directory

Once the directory is marked as a Resource Root the imported SASS and JS resources (variables, functions, mixins, etc.) should resolve and be included in the autocomplete options.

IntelliJ with SASS resource resolved

And that’s it.

Conclusion

Like many little niggles this it takes more time debugging a problem than resolving it, so hopefully, this article will save some folks time by side-stepping it.