元素$变量只能通过名字没有在萨斯PhpStorm使用明确的解决

Question

我在萨斯（SCSS）新。在萨斯我跟随7-1 pattern，目前我使用Phpstorm作为IDE。

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

问题

我定义我的颜色变量_variables.scss文件，但是当我在其他.scss文件中使用它，PhpStorm给像错误

元素“沟横”（变量名）只能由名称，而不使用显式进口更多的解决...

我也给我的IDE的截图是这样，你知道我的文件夹结构。

我查遍网络，但是我无法找到任何解决方案，这是不重复的这个问题question OK！

但

当我输入我的_variables.scss在我的SCSS文件，错误消失。

题

所以，我需要在我所有的SCSS文件导入vaiables.scss或我做错了什么？

我不明白这个问题从那里来的？萨斯或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