Как ссылаться на глобальные переменные в модульных файлах LESS?

Как я могу сослаться на переменную, определенную в центральном файле variable.less, в отдельном файле module.less, если модуль напрямую не ссылается на variable.less?

Вот структура моей папки Styles:

Styles
  _variables.less
  Site.less

  Modules
    _forms.less
    _navbar-top.less
    _panels.less
    _titlebar.less
    Modules.less

  Pages
    _page1.less
    _page2.less
    Pages.less

Файл Site.less в основном выглядит так:

@import "_variables.less";
@import "Modules/Modules.less";
@import "Pages/Pages.less";

(включает только файлы LESS с заглавной буквы)

И Modules.less выглядит так:

@import "_forms.less";
@import "_navbar-top.less";
@import "_panels.less";
@import "_titlebar.less";

(включает только файлы с префиксом подчеркивания в той же папке)

Pages.less устроен так же.

Я хочу, чтобы в файле Modules/_panels.less было следующее:

.panel-form {
    .panel-variant(1px; @text-color; @component-default-bg; 1px);
    border-top: solid darken(@component-default-bg, 1px);
    border-bottom: solid darken(@component-default-bg, 1px);
    border-left: none;
    border-right: none;
}

Но, конечно же, мой LESS-компилятор (Visual Studio Web Essentials 2013.5) выдает ошибку и отказывается компилировать файл _panels.less, потому что он ссылается на переменную, которая не существует в ее области видимости.

В настоящее время мой обходной путь — объявить .panel-form в Site.css, но это хак — я не хочу начинать объявлять там произвольное количество модулей.

Можно ли ссылаться на такую ​​​​переменную и при этом компилировать в CSS, и если да, то как? Если нет, есть ли лучшая структура, которую я должен использовать?

Кстати, я заметил, что компилятору LESS тоже не нравится Bootstrap, потому что он вызывает ошибки, если я ввожу один пробел в LESS-файл Bootstrap, например. navbar.less и попробуйте его сохранить, сообщив, что (для navbar.less) миксин .clearfix() не определен. Что, конечно же, так и есть, потому что navbar.less не ссылается на mixins.less, но если он может скомпилироваться из bootstrap.less и ниже, тогда все будет работать нормально...


visual-studio css twitter-bootstrap less web-essentials
person DaveCan    schedule 07.10.2015    source источник
comment
Что вам нужно, так это настроить WE для компиляции главного файла проекта, а не файла, который вы редактируете/сохраняете. Например. см. stackoverflow.com/questions/19213067.   -  person seven-phases-max    schedule 08.10.2015
comment
@seven-phases-max Спасибо, но я ничего не вижу в этом ответе о компиляции мастер-файла. Есть ссылки на то, что WE игнорирует файлы с символом подчеркивания в начале по соглашению. Итак, я предполагаю, что, возможно, мне следует изменить файлы, такие как Modules.css, на _modules.css или аналогичные, чтобы он не пытался компилироваться. Завтра утром попробую. Или я что-то пропустил? Как мне настроить его так, как вы упомянули? Еще раз спасибо.   -  person DaveCan    schedule 08.10.2015
comment
stackoverflow.com/a/19213447   -  person seven-phases-max    schedule 08.10.2015
comment
@seven-phases-max Хорошо, да, мои извинения, я это видел, но ваш ответ читается так, как будто есть способ указать МЫ на один основной файл LESS. Я только что внес это изменение в WE, но он по-прежнему компилирует файлы LESS с префиксом подчеркивания в CSS и выдает ошибки. Ошибки не мешают его сборке, но сообщают об ошибках в окне списка ошибок. Из того, что я прочитал, префикс подчеркивания должен помешать WE компилировать файл LESS, но он все еще компилируется. Я где-то пропустил настройку? Еще раз спасибо.   -  person DaveCan    schedule 08.10.2015
comment
Хм, переименование файла Modules/Modules.less в Modules/__Modules.less (2 знака подчеркивания, поэтому он сортируется вверху), похоже, решает проблему. Он по-прежнему выдает ошибки и засоряет список ошибок, но стили, которые я определяю в Modules/_panels.less с использованием переменных из ./_variables.less, на самом деле правильно компилируются в ./Site.css при сборке. Хотелось бы, чтобы был какой-то способ отключить ошибки, но, по крайней мере, он работает. Спасибо за указатель.   -  person DaveCan    schedule 08.10.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я не знаю, какая у вас среда, но с директивами тройной косой черты это обычно работает:

  • корень
  • меньше
      • _vars.less
      • modules
        • someModule.less

Внутри "someModule.less" вы должны попробовать это:

/// <reference path="../_variables.less" />
person Martin Chaov    schedule 04.07.2017