@marceloverdijk Мне было бы интересно узнать, что вы думаете о # 331 и о том, как следует корректировать пути при импорте таблиц стилей.

Правило простое: импортируйте только те файлы, которые заканчиваются на .less или не имеют расширения, остальное остается на усмотрение браузера. Таким образом, <strong i="6">@import</strong> "foo.css" остается нетронутым, <strong i="8">@import</strong> "foo" и <strong i="10">@import</strong> "foo.less" анализируются и файлы импортируются.

Хорошо, правило ясное. Спасибо.

Но знаете ли вы, почему тогда на самом деле импортируется Google Font?
Единственная разница в том, что я использую Env.js и Rhino вместо настоящего браузера.

Может быть, логика less использует что-то, чтобы определить, следует ли импортировать или нет, что не понимается (или неправильно) Env.js?

Любая помощь приветствуется.

Обратите внимание, что я использую это для компиляции LESS:

var результат; var p = новый less.Parser (); p.parse (ввод, функция (е, дерево) {результат = tree.toCSS ();});

1 вопрос о правиле. Цитаты имеют значение?

Я заметил это в источнике import.js less:

    if (path instanceof tree.Quoted) {
        this.path = /\.(le?|c)ss$/.test(path.content) ? path.content : path.content + '.less';
    } else {
        this.path = path.value.content || path.value;
    }

Обходной путь, который я использовал, - это добавить &.css к URL-адресу шрифта, чтобы обмануть анализатор LESS и заставить его обрабатывать его, как обычный импорт CSS. Вот так:

<strong i="7">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans&.css);

Кстати, мне очень жаль, что оригинальные дизайнеры LESS не использовали отдельную директиву @include вместо повторного использования старого бедного @import ...

Я думаю, что он должен работать и без этого, как предлагает тест https://github.com/cloudhead/less.js/blob/master/test/less/import.less

который содержит

<strong i="8">@import</strong> url("import/import-test-a.less");
//<strong i="9">@import</strong> url("import/import-test-a.less");
<strong i="10">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);

#import-test {
  .mixin;
  width: 10px;
  height: <strong i="11">@a</strong> + 10%;
}

и ожидает

<strong i="15">@import</strong> "import-test-d.css";

<strong i="16">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);
#import {
  color: red;
}
.mixin {
  height: 10px;
  color: red;
}
#import-test {
  height: 10px;
  color: red;
  width: 10px;
  height: 30%;
}

который все еще содержит импорт Google Fonts.
Я сам их не тестировал, но полагаю, что он прошел.

PS: Этот импорт Google Fonts - единственная часть, не проходящая в моей библиотеке lesscss4j с открытым исходным кодом.
Все остальные тесты на совместимость сейчас проходят.

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

Спасибо, maranomynet, за отличный обходной путь для веб-шрифтов Google в LESS (у меня были проблемы с использованием @import в версии LESS 1.1.3). Я согласен, что LESS неудачно обработал эту часть синтаксиса.

Я запуталась даже больше.

Я создал простой веб-проект и добавил в раздел заголовок приведенный ниже код:

<link rel="stylesheet/less" type="text/css" href="/less/google.less">
<link rel="stylesheet/less" type="text/css" href="/bootstrap/bootstrap.less">
<script src="/js/less-1.1.4.js" type="text/javascript"></script>

Компиляция Twitter Bootstrap работает, а google.less - нет.
Этот google.less содержит только строку ниже, скопированную из LESS-теста на совместимость import.less

<strong i="11">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);

Ошибка, которую я получаю в браузере:

Не удалось загрузить http: // localhost : 8888 / less / http://fonts.googleapis.com/css?family=Open+Sans (404)
http: // localhost : 8888 / less / google.less

Теперь я действительно начинаю задаваться вопросом о тесте на совместимость import.less ....

добавить & .css перед закрытием импорта URL

из
@import url (http://fonts.googleapis.com/css?family=Open+Sans);

к
@import url (http://fonts.googleapis.com/css?family=Open+Sans&css);

У меня была аналогичная проблема, поэтому, если это кому-то поможет: я пытался импортировать несколько шрифтов Google, разделенных символом '|':
@import url (http://fonts.googleapis.com/css?family=Inconsolata|Cantarell|Architects|Daughter&.css);
что привело бы к ошибке «отсутствует закрытие) для url ()»

Ошибка была устранена путем заключения URL-адреса в кавычки (примечание: & .css все еще должен быть в конце, иначе произошла ошибка импорта 404). Все шрифты тоже успешно загружаются:
@import url ("http://fonts.googleapis.com/css?family=Ubuntu+Mono|Cantarell|Architects|Daughter&.css");

хорошие советы enoex: D спасибо !!!!

Эээ, трудно понять, почему этот вопрос был закрыт. Пользователи обнаружили вокруг него невероятно хитрый хакер, который может сломаться, если Google решит придать значение & .css; это нужно исправить в lessc. Должен существовать какой-то метод, чтобы заставить @import восприниматься буквально.

Я согласен. какие-либо предложения?

<strong i="6">@import</strong> css url(...);

это возможность. Это также позволит вам принудительно импортировать Less с расширением .css.

Этот синтаксис выглядит нормально (синтаксический анализатор пишу не я, поэтому не знаю, насколько он подходит).

Меня беспокоят только другие компиляторы less . Код, с которым у меня возникли проблемы, отлично работал у разработчиков, которые его написали, вероятно, потому, что их компилятор less даже не выполняет @import время компиляции. Так что даже если бы это было исправлено в lessc , я бы, вероятно, продолжил использовать хак "& .css". Но с этим ничего не поделать.

Кто-нибудь нашел исправление?

Я обнаружил, что добавление "& .css" и заключение URL-адреса в кавычки решает только проблемы компиляции - шрифты, которые я указываю, все еще не отображаются ....

повторно открыли, так как это звучит так, как будто это все еще проблема - не так ли?

простое исправление - не добавлять ничего к URL-адресу, если он содержит параметры (например,? family = x)

@ntoft Я больше не могу воспроизвести ошибку .. используя lessc .. в чем именно осталась проблема?

Спасибо за продолжение.

Я использую подход «добавить & .css», и теперь он работает (частичная ошибка пользователя: - /) Было просто любопытно, есть ли лучший метод. Тем не менее, похоже, что он работает, поэтому не стесняйтесь закрыть его.

Благодарю.

было бы неплохо, если бы он работал без подхода с добавлением .css .. так что у вас есть пример этого?

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

Возможно, в 1.4.0 @import следует оставить в покое, а @include всегда следует включать

перенос обсуждения в один вопрос # 1185

Просто нужно было экранировать такие символы, как @import url (https \: \ / \ / fonts.googleapis.com \ / css? Family = Orbitron & .css);

@ jas-naz Правильный и более читаемый способ:

<strong i="6">@import</strong> (css) url(https://fonts.googleapis.com/css?family=Orbitron);

Для более см http://lesscss.org/features/#import -atrules-полнометражных-импорт-опций.

Здравствуйте, еще один способ добиться этого - добавить "#css" в конце URL-адреса, например:

<strong i="6">@import</strong> url('https://fonts.googleapis.com/css?family=Paytone+One#css');

@TyrionGraphiste

Плохая идея. В последних версиях Less фактически обрабатывает этот файл (вместо того, чтобы оставлять импорт как есть).
Поэтому (css) перед ним обязательно. (В более ранних версиях это было просто неправильное поведение, когда компилятор определял "некоторую" строку css в URL-адресе вместо правильного расширения, отсутствующего в данном конкретном случае).