Почему я не могу импортировать бездействующие файлы в один файл без значения?

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

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

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

Когда я ввожу (в style.less):

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

или

@import "/css/StyleToImport.less";

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

Неужели невозможно объединить файлы без файлов в один файл?

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

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

P.S. Я прочитал Присоединиться к двум бездейственным файлам в один файл css

и я прочитал следующее:

Импорт

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

@import "library";

@import "typo.css";

Ответ 1

Я просто попробовал это в своей локальной среде, поместив vars в vars.less и mixins в conf.less. Структура файла, похожая на вашу, с базовым .less файлом на уровне ниже папки, содержащей все "включает".

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

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

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

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

По крайней мере, сделайте снимок, потому что используется ту же структуру, что и ваша моя.

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

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

../directory/file.less