Подтвердить что ты не робот

Ошибка имени переменной "undefined", хотя импортированные переменные .less

Я начал использовать LESS сегодня. Но это странно. Этот код не работает. Я получаю сообщение об ошибке:

! Variable Name Error: @linkColor in a is undefined.

Мой загрузочный лоток:

@import "variables.less";
@import "normalize.less";

variables.less:

@linkColor:             #08c;
@linkColorHover:        darken(@linkColor, 15%);

normalize.less:

a {
    color: @linkColor;
}
a:visited {
    color: @linkColor;
}
a:hover {
    color: @linkColorHover;
}

Когда я делаю

@import "variables.less"

в файле normalize.less все работает нормально.

Спасибо за вашу помощь:)

4b9b3361

ОТВЕТЫ

Ответ 1

Этот другой вопрос в конечном итоге привел меня к правильному ответу.

Похоже, что компилятор LESS не работает, если файлы закодированы с помощью спецификации. (Это "Оценка байта" для тех, кто не знаком с этим термином.) Это значение по умолчанию для некоторых редакторов, таких как Visual Studio.

Компилятор выводит ошибку в спецификации, если она находится в вашем корневом файле, но, похоже, не работает для @импортированных файлов.

Попробуйте сохранить ваши файлы как UTF-8 без спецификации и посмотрите, не решит ли ваша проблема.

Ответ 2

Возможно, существует и другая возможная причина.

Вот мой оригинальный Gruntfile.js:

less: {
      compile: {
        files: {
          'css/less.css': 'less/**/*.less'
        }
      }
    },

Подстановочный знак делает компилятор LESS компилировать все .less файлы под этой папкой и объединять все результаты в один CSS. И у меня появились ошибки grunt less:compile:

NameError:.transition undefined в less/core/html.less в строке 38, столбец 3

Как только я изменил 'less/**/*.less' на 'less/css.less', компиляция завершится успешно.

Ответ 3

Я столкнулся с той же проблемой, используя компилятор Winless.

Некоторые из файлов .less, которые я импортировал в master.less, были пустыми. когда я удалил их из списка импортированных файлов, мои переменные были распознаны!

Ответ 4

Эта ошибка также может возникать в результате неправильного импорта в импортируемых вами файлах.

Я также столкнулся с этой проблемой при использовании нескольких уровней импорта и компилятора 'lessc' из Node.js:

  • Исходный файл импортировал файл (который мы будем называть "дочерним" )
  • Детский файл импортировал файл (который мы будем называть "внуком" )
  • Внук был импортирован

Я попытался скомпилировать исходный файл и получил такое же поведение переменной undefined. Я мог видеть, что переменная была определена в дочернем элементе, а синтаксис выглядел корректно.

Ошибок не было.

Проблема оказалась в том, что ребенок не импортировал внука должным образом. Т.е.,

@import grandchild.less

а не:

@import "grandchild.less";

Фиксирование дочернего имения внука сделало исходный файл доступным для переменных, определенных в дочернем элементе.

Кажется, что ошибка меньше - т.е. плохой импорт должен появиться на выходе "lessc", поэтому в один прекрасный день он, вероятно, будет исправлен. До тех пор я надеюсь, что это поможет.

Ответ 5

Чтобы помочь любым другим, кто может столкнуться с этим, не нужно дублировать CSS, созданный из нескольких импортов, у вас есть два варианта.

  • Либо @import - как только файлы переменных /mixins вам нужны в каждом файле, в котором вы должны их использовать.

    Используйте @import-once "filename.less"; для предотвращения дублирования.

  • Переход к МЕНЬШЕ > 1.4.0, когда он поступит; С менее сайта:

    "The statement @import acts differently before and after 1.4.0. It acts as @import-multiple in all older versions and as @import-once in all less.js versions after 1.4.0."

Ответ 6

Вы также можете получить эту ошибку, если вы пытаетесь дважды импортировать файл (не очень хорошая идея), а первый импорт - до того, как ваши переменные, указанные в файле your.less, были загружены

Примечание. Я использую сжатие django

в index.html у меня было:

{% compress css %}
<link href="{{ STATIC_URL }}less/timepicker.less" rel="stylesheet" type="text/less">
<link href="{{ STATIC_URL }}less/style.less" rel="stylesheet" type="text/less">
{% endcompress %}

то в styles.less я имел

...
@import "timepick.less";

Ответ 7

Я думаю, это из-за того, какой мастер файл меньше вы компилируете. Аналогично

Если у вас есть Less/Project_name/project.less и в этом проекте. Если вы импортируете переменную меньше и все остальные файлы, которые есть в каталоге.

Вам просто нужно скомпилировать project.less в свой css, а не все меньше файлов. Если вы попытаетесь скомпилировать project.less и variables.less, вы будете иметь эту ошибку. И вы можете избежать избыточного объявления импорта переменной меньше файлов

Ответ 8

Я использовал бы вложенные правила в normalize.less:

a {
     color: @linkColor;

     &:visited {color: @linkColor;}

     &:hover {color: @linkColorHover;}
}

И в @import вам не нужно использовать ".less", необязательно:

@import "variables";
@import "normalize";

Я не знаю, поможет ли это...

Ответ 9

Еще одна странная конкретная ситуация, в которой это происходит: если вы используете .NET и без потерь, компилятор будет подавлять вложенные медиа-запросы с помощью спецификаторов переменных. Если у вас есть такой код:

@media (min-width: @aVariable) {
    .some-class{
        margin: 10px;

        @media (min-width: @anotherVariable) {
            margin: 20px;
        }
}

... то бесцеремонный скажет вам, что он не может найти определение для @anotherVariable, даже если он использовал три строки выше.

Ответ 10

Для меня это произошло при использовании @Import-once и ничего не помогло. но с @Import его работала.

как я прочитал в последней версии "Менее импорта", будет работать как "Импорт-один раз".