Не удается заставить работать dotLESS @import

Я борюсь с dotLESS @import, чтобы иметь отдельный файл переменных; Я просто постоянно получаю «переменная не определена».

Если я перехожу к файлу конфигурации переменных, он работает; если я поместил переменные в основную таблицу стилей, это сработает; но в @import нет костей. Я сопоставляю .css и .less с расширением, однако это также не работает, если я использую только .less.

Файл переменных LESS-config.less:

/*
  .LESS VARIABLES
*/
@mbw_dark_cyan: #1293b5;
@mbw_cyan: #11add4;
@mbw_magenta: #e935da;

@control_text: #ffffff;

@action_delete: #ff5400;

@section_level1_bg: @mbw_dark_cyan;
@section_level1_fg: @control_text;

@button_bg: @mbw_dark_cyan;
@button_fg: @control_text;
@button_icon: @control_text;

@data_table_header: @mbw_cyan;

.dummy {
    color: @control_text;
}

Что отображается как:

/*
  .LESS VARIABLES
*/
.dummy {
  color: #ffffff;
}

Вызов таблицы стилей main.css:

@import (less) '/css/LESS-config';

button {
    background: @button_bg;
}

Что дает ошибку:

variable @button_bg is undefined on line 4 in file '/css/main.css':
  [3]: button {
  [4]:     background: @button_bg;
       ----------------^
  [5]: }

Как я уже сказал, если я заменю импорт теми же скопированными и вставленными переменными, все будет работать нормально.

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

РЕДАКТИРОВАТЬ, я пробовал:

  • Удаление (меньше)
  • Переход на двойные кавычки
  • Использование относительного пути LESS-config вместо виртуального абсолютного, как указано выше.
  • Добавление logger="dotless.Core.Loggers.AspResponseLogger" log="debug" к web.config (cache уже false)
  • Добавление debug="1"
  • Добавление debug="true"

Абсолютно никаких изменений в поведении.

РЕДАКТИРОВАТЬ 2:

Я создал урезанный css, в котором был только оператор импорта; когда я просматриваю его, импортированные стили находятся там. Однако при обновлении я просто получаю пустой ответ.

Так что, похоже, это как-то связано с моей конфигурацией / кэшированием IIS? Я отключил сжатие контента, но без радости; отключил все кэширование вывода для .less и .css, все равно нет радости!

ИСПРАВЛЕНО согласно комментарию Тони; https://stackoverflow.com/a/51754771/318411:

Это оказалось проблемой без точки, отслеживаемой на GitHub здесь: https://github.com/dotless/dotless/issues/553

Полное исправление заключалось в следующем:

  1. Обновите dotLESS до версии 1.6.7
  2. Понизить версию Microsoft.Extensions.DependencyInjection до 1.1.1.0 из-за Method not found error
  3. Измените расширение файла импорта с .css на .less

Теперь все работает.


person Whelkaholism    schedule 14.06.2018    source источник
comment
Правилен ли синтаксис вашего оператора @import? Я не узнаю частицу (less) и видел ее только в двойных кавычках... Из Less .js сайт синтаксис указан как @import "@{themes}/tidal-wave.less";   -  person DavidW    schedule 18.06.2018
comment
Кроме того, ваш путь правильный? Вы уверены, что /css находится в корне вашей файловой системы?   -  person DavidW    schedule 18.06.2018
comment
Я проверю цитаты, та! Что вы подразумеваете под корнем файловой системы - /css это виртуальный корень веб-сайта - это правильно?   -  person Whelkaholism    schedule 19.06.2018
comment
Поменял кавычки и потерял (less), все равно без радости :(   -  person Whelkaholism    schedule 19.06.2018
comment
Просто предположение: обратите внимание, что ваш основной файл на самом деле является файлом CSS (main.css) и, строго говоря, он не должен обрабатывать какие-либо Less импорты или переменные. Технически вы должны получить ошибку прямо в @import (less) или, по крайней мере, в @button_bg (оба недействительны в файле CSS). Другими словами, это может быть просто какая-то особенность ваших настроек (dotless не должен не обрабатывать *.css файлы вообще).   -  person seven-phases-max    schedule 20.06.2018


Ответы (3)


Попробуйте версию 1.6.7, в которой исправлена ​​ошибка, связанная с импортом только выполняется по первому запросу.

person Toni Wenzel    schedule 08.08.2018

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

  1. Вы пытаетесь вызвать @import (less) в файле css. Это синтаксис, характерный для меньшего фреймворка.
  2. Ваш main.css не меньше файла.

Измените ваш main.css на файл main.less, а теперь попробуйте сгенерировать свой css из main.less в качестве корневого файла. Предположим, что ваш URL-адрес импорта для LESS-config.less правильный. Вышеупомянутые исправления, вероятно, должны помочь.

person SomberTuna    schedule 20.06.2018
comment
Я попробую на случай причуд, но обработчик без точек сопоставляется с .css файлами, а также с .less. Файлы CSS определенно анализируются как LESS, потому что в них работают переменные, если они не импортируются; это только импорт, который не работает - также вы видели, как мой EDIT 2 работал один раз? - person Whelkaholism; 20.06.2018
comment
@Whelkaholism обработчик без точек сопоставляется с файлами .css, а также с .less И это то, что мы предлагаем в качестве корня проблемы. т.е. dotless обрабатывает (пытается) ваш css как файл меньшего размера, но из-за некоторых внутренних особенностей/ошибок он просто не может делать все (например, импортировать), как ожидалось. Тот факт, что переменные или какие-либо другие функции (даже если это 99 из 100) работают именно так, ничего не значит. - person seven-phases-max; 20.06.2018
comment
не работает только импорт. Это потому, что вы пытаетесь импортировать файл меньшего размера в файл css. Я не думаю, что это возможно. Я не думаю, что синтаксический анализатор без точек может разобрать это так. Вместо вызова файла main.css. Просто переименуйте его в main.less. Тот же код при вызове из файла main.less должен работать корректно. - person SomberTuna; 20.06.2018
comment
Правильно, имеет смысл. Я вернусь к этому проекту сегодня днем ​​и попробую. - person Whelkaholism; 21.06.2018
comment
Боюсь, это ничего не меняет. Опять же, это работает, когда я впервые перехожу на страницу, но затем все последующие обновления терпят неудачу. Это должно быть что-то, что делает IIS, кэширование, сжатие - понятия не имею, что, я отключил все параметры кэширования и сжатия, которые я могу найти без радости :( - person Whelkaholism; 26.06.2018

@import (less, optional) "mystyle.css"; — это синтаксис Less, его нельзя использовать в CSS (Меньше правил @import).

Если вы хотите использовать @import в своем CSS, он должен следовать следующему синтаксису (см. здесь)

@import url|string list-of-mediaqueries;

Но вы все равно не можете импортировать файл Less в свой CSS.


Как бы я это сделал:

Допустим, у вас есть 3 файла .less: config.less, color.less, header.less.

Я бы создал файл style.less со следующим содержимым:

/*------------------------------------------------------------------------------*/
                                   style.less
/*------------------------------------------------------------------------------*/

/* 01. config */
@import "config.less";

/* 02. color */
@import "color.less";

/* 03. header */
@import "header.less";

Затем я скомпилирую style.less, что создаст style.css, и включу style.css на свой веб-сайт.

person Hooman Bahreini    schedule 24.06.2018
comment
Я не занимаюсь предварительной компиляцией; Я использую обработчик на лету. Это приложение для интрасети находится в постоянной разработке, поэтому удобство обработчика намного перевешивает любые преимущества скорости предварительной компиляции. - person Whelkaholism; 26.06.2018