web-dev-qa-db-fra.com

L'élément $ variable est résolu uniquement par son nom sans utiliser d'explicite dans Sass PhpStorm

Je suis nouveau à Sass (SCSS). Dans Sass, je suis 7-1 pattern et actuellement j'utilise Phpstorm comme IDE.

J'importe tous mes _<name>.scss fichiers dans un fichier principal appelé main.scss fichier.

Problème

Je définis mes variables de couleur dans _variables.scss fichier mais quand je l'utilise dans un autre fichier .scss, PhpStorm donne une erreur comme

L'élément 'Gutter-horizontal' ( nom de variable ) est résolu uniquement par nom sans utilisation d'importations explicites plus ...

Je donne également une capture d'écran de mon IDE donc, vous connaissez la structure de mon dossier.

enter image description here

Je vérifie partout sur Internet mais je ne trouve aucune solution, ce n'est pas une question en double de cela question ok !!

MAIS

Lorsque j'importe mon _variables.scss dans mes fichiers scss, erreur disparue.

enter image description here

Question

Alors, dois-je importer vaiables.scss dans tous mes fichiers scss ou j'ai fait quelque chose de mal?

Je ne comprends pas ce problème venant d'où? Sass ou 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

Non, vous le faites correctement. Ayez un fichier main.scss et assurez-vous que vos variables sont la chose first que vous importez (sinon vous rencontrerez des problèmes de variables non définis dans d'autres fichiers). Vous n'avez pas besoin de réimporter vos variables pour chaque fichier tant qu'elles sont toutes incluses dans votre fichier main.scss.

J'ignore normalement cette erreur PhpStorm, ou vous pouvez la désactiver:

  • Accédez à File -> Settings
  • Editor -> Inspections dans le panneau de gauche
  • Sass/SCSS dans le panneau de droite
  • décochez Resolved by name only
35
Mikepote