Почему я не могу импортировать файлы .less в один файл .less?

Question

У меня есть такая структура моих файлов:

lib/css/... содержит мои стили, разделенные на отдельные файлы .less для каждого вида области.

lib/style.less - это файл, который я хочусобрать мои файлы подстиля в - и файл, который я хочу связать в HTML.

Когда я набираю (в style.less):

@import url("/css/StyleToImport.less");

или

@import "/css/StyleToImport.less";

... Я получаю синтаксическую ошибку.

Действительно ли невозможно объединить файлы .less в один файл?

Может быть очень удобно иметь один файл, содержащий все переменные для цветов, размеров и т. Д.

Но сейчас я должен использовать теги <link ...> в HTML для каждого файла -что не очень удобно.

PS Я прочитал Объедините два файла .less в один файл CSS

, и я прочитал это:

Импорт

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

@ import "library";

@ import "typo.css";

Answer 1

Я только что попробовал это в моей локальной среде, поместив переменные в vars.less и миксины в conf.less.Структура файла аналогична вашей, с базовым файлом .less на уровень ниже папки, содержащей все «include».

Итак, у меня была папка css, в которой был мой файл main.less, а затем css/less/vars.less | conf.less

Чтобы импортировать оба из них:

@import "less/vars.less";
@import "less/conf.less";

Мой единственный ответ - удалить первый / в вашем @import утверждении.У меня были похожие проблемы при попытке импортировать шрифт Google в мой файл .less.

По крайней мере, стоит попробовать, потому что работает та же структура, что и у вас.

Answer 2

У меня была похожая проблема, когда импорт, казалось, молча провалился.Оказалось, что мой редактор сохранил файлы @ import-ed как UTF-8 с BOM, как описано в этом вопросе .

По какой-то причине компилятор LESS беззвучно подавляется @импортированные файлы с спецификацией, даже если она выдает ошибку, если у вашего корневого файла есть спецификация.

Попробуйте повторно сохранить файлы @ import-ed без спецификации,и это может сработать.

Answer 3

Когда вы ссылаетесь на каталог /, он выглядит сверху вниз и в этом случае не найдет его. Так что @Daniel прав, предложив удалить косую черту.

Вы должны связать это так:

@import url("css/StyleToImport.less");

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

Если вам нужно будет сначала перейти в каталог, а затем снова и снова, вы должны сделать

../directory/file.less

Answer 4

Я не совсем уверен, в чем проблема без ошибки.

Я бы предложил использовать lessapp, http://incident57.com/less/,, который, как я обнаружил, работает очень хорошо и его немного проще использовать.Также будьте осторожны при попытке импортировать пустые файлы, поскольку это может привести к ошибке.

Я загрузил некоторый базовый код, который я использую для структурирования своих файлов в зависимости от проекта - вы можете получить их по адресу https://github.com/danethurber/seamLESS. Это может помочь, и если вы или кто-то захотите внести свой вклад, я сделаю это.будь счастлив за помощь:)