Element $variable is resolved only by name without use of explicit in Sass PhpStorm

37
votes

I'm new in Sass ( SCSS ). In Sass I follow 7-1 pattern and currently I am using Phpstorm as IDE.

I import all my _<name>.scss files in one main file called main.scss file.

Problem

I define my color variables in _variables.scss file but when I use it in other .scss file, PhpStorm gives error like

Element 'gutter-horizontal' (variable name) is resolved only by name without use of explicit imports more...

I also give screenshot of my IDE so, you know structure of my folder.

enter image description here

I check all over internet but I can't find any solution, this is not duplicate question of this question ok !!

BUT

When I import my _variables.scss in my scss files, error gone.

enter image description here

Question

So, do I need to import vaiables.scss in my all scss files or I done something wrong ?

I don't understand this problem coming from where ? Sass or PhpStorm ?

variables.scss

// COLORS

$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$color-gray-dark: #777;

$color-black: #000;
$color-white: #fff;

// GRID

$grid-width: 114rem;
$gutter-vertical: 8rem;
$gutter-horizontal: 6rem;

main.scss

@charset "UTF-8";

@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';

@import 'base/animations';
@import 'base/base';
@import 'base/typography';
@import 'base/utilities';

@import 'components/buttons';

@import 'layout/header';
@import 'layout/grid';

@import 'pages/home';
2
csssassphpstorm
Just ignore the error from PHPStorm – SuperDJ
any specific reason ? – Nisharg Shah
It's just to let you know. As long as you don't get a real error from SCSS than you're good to go. The error isn't even there if you'd use an editor like vsc – SuperDJ
ohk, so what i do to solve that error in phpstorm, just ignore ? – Nisharg Shah
IDE does not know that variables from your _variables.scss will be used in _grid.scss via your main.scss (because it's used indirectly). You can read a bit more in this comment: youtrack.jetbrains.com/issue/…. As mentioned by Mikepote, that inspection can be disabled. – LazyOne

2 Answers

80
votes

No, you're doing it correctly. Have one main.scss file and make sure your variables are the first thing that you import (otherwise you will run into undefined variable issues in other files). You do not need to re-import your variables for each file as long as they are all included in your main.scss file.

I normally ignore this PhpStorm error, or you can turn it off:

  • Go to File -> Settings
  • Editor -> Inspections in the left panel
  • Sass/SCSS in the right panel
  • uncheck Missing import (or Resolved by name only on older versions)
2
votes

In GoLand version 2021 the item Resolved by name only was renamed:

  1. Preferences -> Editor -> Inspections -> Sass/SCSS (in the right panel)
  2. Uncheck Missing Import