Элемент $variable разрешается только по имени без явного использования в Sass PhpStorm

Я новичок в Sass (SCSS). В Sass я слежу за 7-1 pattern и в настоящее время использую Phpstorm в качестве IDE.

Я импортирую все свои файлы _<name>.scss в один основной файл с именем main.scss file.

Проблема

Я определяю свои цветовые переменные в файле _variables.scss, но когда я использую их в другом файле .scss, PhpStorm выдает ошибку, например

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

Я также привожу скриншот своей IDE, так что вы знаете структуру моей папки.

Я проверяю весь интернет, но не могу найти решения, это не повторяющийся вопрос этого вопрос ok !!

НО

Когда я импортирую свой _variables.scss в свои файлы scss, ошибка исчезает.

Вопрос

Итак, мне нужно импортировать vaiables.scss во все мои файлы scss или я что-то не так сделал?

Я не понимаю, откуда эта проблема? Sass или PhpStorm?

переменные.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';