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

Question

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.

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.

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';

Answer 1

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)

Answer 2

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