Intellij IDEA Ultimate sass module resolution

I have an issue that IntelliJ fails to resolve sass mixins and variables.

Our structure got more complicated recently and the quality of life editing scss files is really affected. The structure is as follows:

Main project (Java project)

|- frontend-sub-module

  |- shared-code-dir

    |- source

      |- styles

        |- variables

          |- _color-variables.scss

        |- mixins

          |- _layout.scss

        |- components

          |- _component.scss

  |- main-code-dir (this is a sub-sub-module)

    |- source

      |- styles

        |- main.scss

  |- separate-theme-dir (same structure as main-code-dir and is a sub-sub-module)

  |- separate-theme-dir1 (same structure as main-code-dir and is a sub-sub-module)

 

In main.scss we include other scss files from shared-code-dir and sass can handle this. If I open _component.scss and try to use any variable defined in variables/_color-variables.scss or any mixin defined in mixins/_layout.scss IntelliJ shows the errors "Cannot find mixin" and "Cannot find variables" respecitvely.
I tried setting the shared-code-dir as Resources root or Source root but nothing makes IntelliJ recognize the other sass files.

The structure is so configured and there's no chance to change it, but would be great to somehow be able to give a hint to the sass where the code is so it can be resolved correctly.

Is there any way to do this with my structure?

7 comments

Are main-code-dir and shared-code-dir separate IDEA modules?  This won't work then - SASS references are not resolved across IDEA modules boundaries unless the module your vars are defined in is added to dependencies of the module main.scss is located in:(

1

Thanks for the quick response :)


The main-code-dir is an IDEA module, i.e. .iml file is present.

The shared-code-dir is a plain directory which serves to hold files which can be included.

Trying to include a mixin from an scss file where the scss file is in shared-code-dir results in IntelliJ reporting the mixin cannot be found. This is most surprising.

When a mixin is defined in main-code-dir , and then included in the same direcotry then includes work as expected.

I guess the IDEA module is the main boundary that's affecting us.

 

0

What do you mean saying that shared-code-dir is a plain directory? Is it included in your project? If yes, what IDEA module does it belong to?

0

There is a root directory of the whole project, i.e. has the main iml file. Then we have frontend-sub-module which is a java module inside the main project, with it's own iml file. Under the frontend-sub-module we have the two directories in question, the shared-code-dir (which has no iml file, just a directory, included in the project, it's visible in the project tree) and then the main-code-dir which again has an iml file.

 

0

So these folders belong to different IDEA modules - thus the issue.

0

Thanks for your answers Elena. As you previously hinted, that is the culprit. Any insight you can share if cross module code hints would be implemented for sass?

While I'm here, do you know if someone writing a plugin for IntelliJ can tap into the sass parser to try and provide a workaround for this? If this requires a different question I'd be happy to create another one :)

0

>Any insight you can share if cross module code hints would be implemented for sass?

Not in our plans... IDEA modules were designed to be isolated, the only way to make code defined in one module available in the other is using module dependencies

0

Please sign in to leave a comment.