Элемент разрешён только по имени без использования импорта. Что это значит?

Question

[N-I]

Появляется при добавлении переменных и не компилируется. Что это значит? И как использовать тогда переменные? Как нужно правильно делать?

Answer 1

[Сергей delphinpro]

Это значит, что ваша IDE создала индекс всего кода проекта. И нашла в этом коде объявление данной переменной. Т.е вы ее где-то в другом файле объявили.
Но IDE не может гарантировать что вы подключили этот файл, вот и предупреждает.

Storm не умеет полностью парсить все вложенные в файлы импорты и смотрит только на то, что подключено в текущем sass файле явно.

Я как правило отключаю эту инспекцию, чтобы глаза не мозолила.

Если у вас не компилируется, значит вы не подключили нужный файл.

Например у вас есть
settings.scss
$myVariable: red;

block.scss

.block {
  background: $myVariable;
}

styles.scss

@import 'settings.scss';
@import 'block.scss';

вот если вы откроете файл block.scss - в нем storm будет показывать данное предупреждение.
Но т.к. все импорты корректные, стили скомпилируются нормально.

Но если вы в файле styles.scss забудете подключить settings.scss, то IDE по-прежнему будет показывать такое же предупреждение, но стили уже не скомпилятся.

Comments

[N-I]

Вот проект. В _variables.scss всё закомментировано, где нужно убираю комментарий, удаляю !default и меняю. Эти переменные не меняла.

Пишу в _header.scss. Что не так? Пробовала и в _custom.scss и сразу в style.scss. Всё то же самое.

[N-I]

Поставила bootstrap на первое место, выше custom.
Всё теперь компилируется. Спасибо.)

[N-I]

Теперь _variables не компилируется и переменные не меняются, если их менять и в custom.
Совсем запуталась что-то.

[Сергей delphinpro]

@import 'variables';
@import 'bootstrap';

так в variables вы можете переопределить переменные бутстрапа.

[Сергей delphinpro]

а уже ниже подключайте свои компоненты.

[N-I]

Сергей: Теперь всё работает.)