Хобрук: Ваш путь к мастерству в программировании

Как исправить ошибку неопределенной переменной в SCSS?

Я столкнулся с ошибкой неопределенной переменной при написании SCSS.

  1. Моя файловая структура надежна (я считаю), потому что остальные файлы компилируются, как и должны, в main.scss.
  2. Я использую @use вместо @import.

color: #f22437 vs color: $clr-primary

Error: Undefined variable.
   ╷
54 │   color: $clr-primary;
   │          ^^^^^^^^^^^^
   ╵
  scss/layouts/_navigation.scss 54:10  @use
  scss/layouts/_all-layouts.scss 11:1  @use
  scss/main.scss 7:1                   root stylesheet

Файлы, о которых идет речь.

Изображение ошибки

Структура файла

ОБНОВЛЕНИЕ Я изменил все @use на @import, и это сработало.

Пожалуйста, поймите, почему это сработало и как я могу использовать @use вместо @import. Похоже, проблема связана с SASS, но я все еще могу быть виноват. А пока я его "взломаю".

compiler-errors css sass undefined
24.11.2020

  • Согласно этому (github.com/sass/sass/issues/2070), они скажем, сделать переменные файлы наверху. 24.11.2020
  • Он находится в верхней части моего scss/helpers/_variables.scss находится в верхней части каталога helpers, а каталог helpers находится в верхней части моего файла main.scss (как показано на изображении файлов). Кроме того, я попытался импортировать файл переменных отдельно и сначала, но это не решило проблему. 24.11.2020

Ответы:


1

Во-первых:

@use в настоящее время доступен только для Dart Sass, но не для LibSass или Ruby Sass. См. https://sass-lang.com/documentation/at-rules/use для последней совместимости

Второе:

_variables.scss

$text-colour: #262626;

_otherFile.scss

@use 'variables';

body {
  color: variables.$text-colour;
}

Проверьте ответ @whiscode здесь: https://stackoverflow.com/a/61500282/2470685

24.11.2020
  • Я прикрепил изображение файловой структуры, показывающее, как файлы вызываются для компиляции. Я попытался применить ваши комментарии к коду, но, к сожалению, ничего не изменилось. Я использую dart sass, но все еще не могу использовать. Хотя импорт работает нормально. 24.11.2020
  • Ну, проблема в вашем коде в том, что вы хотите использовать @use через несколько файлов. И ваши переменные привязаны к пространствам имен, когда вы это делаете. _navigation.scss никогда не знает, какое пространство имен он должен использовать для ваших переменных. Таким образом, лучший подход для вас - это либо пользователь @import и пусть файловая структура будет такой, какая она есть, либо @use ваши переменные в каждом файле, как я заявил в своем ответе. 25.11.2020
    • Новые материалы
    Как ИИ меняет сельское хозяйство
    Прочтите Статью Кэтлин Уолч в Forbes о том, как ИИ меняет сельское хозяйство . Сельское хозяйство и земледелие - одна из древнейших и важнейших профессий в мире. Человечество прошло долгий..
    Slack: проектирование современных интерфейсов человека и ИИ
    Когда Стюарт Баттерфилд выделил Slack из быстро исчезающей онлайн-игры Tiny Speck, его перспективы были в лучшем случае неопределенными. Существовал очевидный спрос на средства связи на рабочем..
    HTTP1.1 против HTTP2
    Http расшифровывается как HyperText Transfer Protocol, это в основном метод, который компьютеры и серверы используют для запроса и отправки информации. HTTP1.1 - это более старая версия Http, а..
    Радость вырезания
    Радость фрагментов По какой-то причине, когда я начал программировать в колледже, я активно сопротивлялся целому ряду земных благ, которые сделали бы мою жизнь чуточку удобнее. Я в основном..
    Создайте стройный слайдер с нуля без каких-либо внешних инструментов
    Слишком долго я полагался на сторонние плагины и инструменты для простых слайдеров. Пока в один прекрасный день в моей крошечной голове не загорелась лампочка, которую я могу сделать..
    Буферы протоколов, часть 01: соглашения об именах и файловая организация
    Если вам нравится читать статьи на Medium и вы заинтересованы в том, чтобы стать участником, я буду рад поделиться с вами своей реферальной ссылкой!
    Наши партнеры
    Globex SCI — уникальная система, которая хранит и позволяет использовать большие базы данных, опубликованные в блокчейне. Используя алгоритмы глубокого обучения и ИИ, мы можем прогнозировать..