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

Question

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

Answer 1

不，您做得正确。拥有一个main.scss文件，并确保变量是您导入的第一件事（否则，您将在其他文件中遇到未定义的变量问题）。您不必为每个文件重新导入变量，只要它们都包含在main.scss文件中即可。

我通常会忽略此PhpStorm错误，或者您可以将其关闭：

• 转到File->Settings
• Editor-> Inspections在左侧面板中
• Sass/SCSS 在右侧面板中
• 取消选中 Resolved by name only