元素$ variable仅按名称解析，而无需在Sass PhpStorm中使用显式

我是Sass（SCSS）的新手。在Sass中，我遵循7-1 pattern，目前正在将Phpstorm用作IDE。

我将所有_<name>.scss文件导入一个名为main.scssfile的主文件中。

问题

我在_variables.scss文件中定义了颜色变量，但是当我在其他.scss文件中使用它时，PhpStorm会给出如下错误

元素'gutter-horizo​​ntal'（变量名）仅按名称解析，而不使用显式导入。

我还提供了我的IDE的屏幕截图，因此，您知道我的文件夹的结构。

我检查了整个互联网，但找不到任何解决方案，这不是这个问题的重复问题，好！

但

当我将我_variables.scss的scss文件导入时，错误消失了。

题

那么，我需要导入vaiables.scss所有的scss文件还是做错了什么？

我不明白这个问题来自哪里？Sass还是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';