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

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

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

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

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

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

or

@import "/css/StyleToImport.less";

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

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

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

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

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

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

Импорт

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

@import "библиотека";

@import "typo.css";


css less
person KristianB    schedule 29.03.2011    source источник
comment
вы можете опубликовать сообщение об ошибке?   -  person dane    schedule 29.03.2011
comment
Синтаксическая ошибка в строке 1 localhost: 8080 / project / lib / style.less в строке 1, столбец 1: * 1 @IMPORT ./css/lib; * 2 @charset utf-8;   -  person KristianB    schedule 29.03.2011
comment
не совсем уверен, что это за ошибка - я бы попытался использовать lessapp и убедиться, что в ваших файлах less есть хотя бы один объявленный стиль   -  person dane    schedule 29.03.2011
comment
Я пытаюсь импортировать LESS-файлы в общий основной LESS-файл. Таким образом я могу ссылаться на все свои переменные и т.д. и т.п. Но это не сработает !! Я что-то не так делаю с ссылкой на файл less.js?   -  person KristianB    schedule 29.03.2011
comment
Крайне поздно для вечеринки, но у меня была эта проблема, пока я не понял, что использую одинарные кавычки вместо двойных, поэтому я должен был использовать @import "variables", но вместо этого использовал @import 'variables'. слишком много JS за эти годы ...   -  person hartz89    schedule 30.04.2015

Ответы (4)


arrow_upward
31
arrow_downward

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

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

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

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

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

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

person Daniel    schedule 30.03.2011

arrow_upward
5
arrow_downward

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

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

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

person Chris Jaynes    schedule 17.05.2012

arrow_upward
1
arrow_downward

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

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

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

person dane    schedule 29.03.2011
comment
Позвольте мне сделать это БЕСШОВНО правильно ... Вы ссылаетесь на автономный файл .css в файле HTML. А где именно вы используете файлы .less? - person KristianB; 29.03.2011
comment
чем меньше файлов находится в папке less - я использую less для компиляции всех других файлов и вывода файла css - person dane; 29.03.2011
comment
Ага, похоже, я не могу запустить это less.app без mac -.- 'Но я подумал, что если поставить <script src="lib/js/less.js"></script> в конце тега <head>, это скомпилирует его для меня? - person KristianB; 29.03.2011
comment
вы тоже можете это сделать - я просто предпочитаю компилировать его, чтобы браузеру не приходилось - person dane; 29.03.2011
comment
не забудьте поместить файл less перед ссылкой js ‹rel = stylesheet / less href = / stylesheets / main.less type = text / css /› ‹script src = lesscss.googlecode.com/files/less-1.0.21.min.js› ‹/› - person dane; 29.03.2011
comment
Но прямо сейчас я привязал к своему style.less вот так <link rel="stylesheet/less" href="lib/style.less" type="text/css" />. И после этого связался со сценарием less.js ... Он все еще не позволяет мне @import ничего ... - person KristianB; 29.03.2011

arrow_upward
1
arrow_downward

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

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

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

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

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

../directory/file.less
person Marlyse Comte    schedule 18.03.2013