web-dev-qa-db-ja.com

要素$ variableは名前でのみ解決され、Sass PhpStormで明示的に使用されません

私はSass（SCSS）の新人です。 Sassでは7-1 patternをフォローしており、現在、PhpstormをIDEとして使用しています。

すべての_<name>.scssファイルをmain.scssファイルという1つのメインファイルにインポートします。

問題

私は_variables.scssファイルで色変数を定義していますが、他の.scssファイルでそれを使用すると、PhpStormは次のようなエラーを出します

要素 'Gutter-horizo​​ntal'（variable name）は、明示的なインポートを使用せずに名前によってのみ解決されますmore ...

また、私のIDE=のスクリーンショットも提供しています。これで、私のフォルダの構造がわかります。

enter image description here

私はインターネット全体をチェックしましたが、解決策を見つけることができません。これはこれの重複した質問ではありません 質問 わかりました!!

だが

_variables.scssをscssファイルにインポートすると、エラーが発生します。

enter image description here

質問

それで、すべてのscssファイルにvaiables.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';
csssassphpstorm
17
Nisharg Shah

いいえ、あなたはそれを正しくやっています。 main.scssファイルを1つ用意し、変数がfirstインポートするものであることを確認します（そうしないと、他のファイルで未定義の変数の問題が発生します）。それらがすべてmain.scssファイルに含まれている限り、各ファイルの変数を再インポートする必要はありません。

私は通常、このPhpStormエラーを無視しますが、オフにすることもできます。

  • File-> Settingsに移動します
  • 左パネルのEditor-> Inspections
  • Sass/SCSS右パネル
  • Resolved by name only
35
Mikepote