Sass linting in JetBrains IDE's (IDEA, PhpStorm, WebStorm etc)

1
votes

When I look at a Sass/ SCSS file in my project, it has a sea of 'orange' errors due to not recognising that the Sass statement in question depends on mix-ins/ variables declared in a separate partial file.

What should I be doing to get the IDE to recognise that such variables and mix-ins are declared in another partial file?

e.g.

_variables.scss
_mixins.scss
_partial1.scss      <-- lots of warnings in here 
_partial2.scss      <-- lots of warnings in here too
main.scss           <-- @imports _variables, _mixins and _partial files.

Example tooltip from error:

enter image description here

2
intellij-ideasassidephpstorm

2 Answers

0
votes

What errors can you see - 'unresolved' or 'resolved by name only'? PhpStorm/IDEA use the following approach for elements resolving in SASS:

  • If element can be resolved to declaration from current file or from explicitly imported files, then it is just resolved

  • If element was not resolved after the first step (declaration is not found in current file/files explicitly imported into current file) then the IDE tries to resolve it just by name no matter which file it's declared in ('global' elements). Resolved element is marked by weak-warning inspection 'Resolved by name only', as the IDE can't know if this element is 'global' or just not imported by mistake. You can disable this inspection if you don't like to see these warnings.

  • If element still not resolved it is marked with warning 'Unresolved something'.

0
votes

There is 2 ways:

  1. To be correct from PHPStorm point of view you need to import all dependencies for each particular file directly into it (as we do, for example, in JavaScript modules). This way, however, will result into CSS code bloating because in a case if your import will contain CSS code - it will be duplicated and it will not be solvable even by minifiers
  2. To get rid of these errors you can just disable this particular inspection. Personally I prefer this way since "Resolved only by name" inspection is specific to SASS/SCSS and will not break similar inspections for other types of files.