импортировать файл .css в файл .less


228

Можете ли вы импортировать файлы .css в файлы .less ...?

Я довольно знаком с меньшим количеством и использую это для всего моего развития. Я регулярно использую структуру следующим образом:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

Все импортные файлы - это другие файлы .less и все работает как надо.

Моя текущая проблема заключается в следующем: я хочу импортировать файл .css в .less, который ссылается на стили, используемые в файле .css, следующим образом:

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

Файл .css содержит класс с именем, .typeно когда я пытаюсь скомпилировать файл .less, я получаю сообщение об ошибкеNameError: .type is undefined

Будет ли файл .less не импортировать файлы .css, только другие файлы .less ...? Или я ссылаюсь на это неправильно ...?!


5
LESS возвращается к CSS, поэтому вы можете просто переименовать style.css в style.less, а затем импортировать его как обычно ... если, конечно, переименование style.css не
подходит

3
да, к сожалению, переименование файла .css не представляется возможным.
Мистер Джонни Вуд

1
Есть такая же проблема. Пожалуйста, поддержите проблему github.com/cloudhead/less.js/issues/303
Ярослав

5
если вам не нужно ссылаться на .css извне, и в то же время вы не должны изменять (переименовывать) файл .css, вы можете создать символическую ссылку на него с .lessрасширением. Затем .lessукажите это как файл. Будучи символической ссылкой, он снимает с себя бремя синхронизации, так как ваши изменения .css немедленно влияют на импортируемый файл .less. Недостатком является то, что вы должны перекомпилировать окончательный CSS после последующих изменений. Для получения информации о создании символических ссылок в Windows введите MKLINK /?в командном окне
Ивайло Славов

@jackwanders, переименование не требуется, поскольку LESS возвращается к CSS (как вы правильно заметили). Вы можете импортировать .cssфайл с помощью встроенного (less)директивы и воспользоваться тем , что .cssсинтаксис является допустимым .lessсинтаксисом
Ira

Ответы:


316

Вы можете принудительно интерпретировать файл как определенный тип, указав параметр, например:

@import (css) "lib";

будет выводить

@import "lib";

и

@import (less) "lib.css";

импортирует lib.cssфайл и обрабатывает его как меньший. Если вы укажете, что файл меньше и не содержит расширения, он не будет добавлен.


1
Это правильный ответ. Третий импортирует + компилирует код CSS как меньший код и не оставляет директиву нетронутой.
CMCDragonkai

1
Я думаю, что @import (include) "lib.css" следует использовать. Мне не нравится семантика лжи компилятору. Конечно, когда вы знаете, что в файле нет кода LESS.

16
Это создаст дополнительный http-запрос для foo.css, поэтому (inline)директива (см. Stackoverflow.com/a/22594082/160968 ) теперь предпочтительнее
Urs

1
(inline)не будет работать, потому что не преобразует внешние ссылки на шрифты или другие @importфайлы ed css. Вы просто получаете больший CSS-файл, который вызывает 404 HTTP-запроса ....
user3338098

Откат последнего изменения, поскольку оно было просто неверным и не отвечало на Q.
seven-phase-max

246

Если вы хотите, чтобы ваш CSS копировался в вывод без обработки, вы можете использовать (inline)директиву . например,

@import (inline) '../timepicker/jquery.ui.timepicker.css';

7
Отлично. Это хорошо работает, когда вы хотите объединить некоторые CSS-файлы (например, в ie7.less), но не обязательно обрабатывать их (например, bootstrap-ie7 использует выражения, которые LESS плохо обрабатывает).
Джо

4
Очень полезно. @import (css) "styles.css";не работал для меня
ivkremer

10
Оба они касаются разных вариантов использования. При (css)этом @importдиректива останется как есть, и в результате файл CSS будет загружен браузером во время выполнения; с (inline)помощью, содержимое CSS-файла фактически импортируется в скомпилированную таблицу стилей, что вам и нужно, например, если этот файл находится вне корневого веб-каталога. Обратите внимание, что поведение по умолчанию при @importзагрузке .cssфайла такое же, как и с (css)флагом - для получения дополнительной информации прочтите документацию :)
neemzy

так что это, очевидно, не сработает, если ваш CSS-файл имеет @importдирективы, так как это потребует «обработки».
user3338098

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

29

Мне пришлось использовать следующее с версией 1.7.4

@import (less) "foo.css"

Я знаю, что принятый ответ - @import (css) "foo.css"но он не сработал. Если вы хотите повторно использовать свой класс CSS в своем новом файле less, вам нужно использовать, (less)а не использовать (css).

Проверьте документацию .


2
У принятого ответа изначально была правильная опция (да, (less)это единственная опция, если вы хотите повторно использовать некоторые стили файла CSS), но по какой-то причине @Fractalf удалил правильную часть в своем последнем редактировании.
максимум семь фаз

1
Вы можете объединить «ссылку» и «меньше»:@import (less, reference) "foo.css"
Скарллот

28

Измените расширение вашего файла CSS на .less. Вам не нужно писать в нем меньше; все CSS действительны МЕНЬШЕ (кроме тех вещей MS, от которых вы должны уйти, но это другая проблема.)

За ответ Фрактальфа это исправлено в v1.4.0


4
Технически, это не импорт CSS-файла.
Nilskp

@nilskp ты прав; но если вы хотите использовать классы в другом файле, вам нужен файл LESS, а не CSS.
Математика

1
@nilskp Вы говорите, что изменение расширения - это слишком много, чтобы запросить анализ файла как LESS?
Математика

23
Да, конечно. Попытайтесь думать вне некоторого небольшого домашнего проекта, где у вас есть все файлы. Думайте о большем, много людей проектах, где не все используют LESS. Существует множество случаев, когда изменение имен файлов невозможно.
Nilskp

1
Вам следует позаботиться о том, чтобы в вашем css было что-то вроде: calc (100% - 45px); и вы хотите это в браузере. Если меньше обрабатывает файл как меньше, конечный результат будет: calc (55%); потому что меньше делает калькулятор.
Кристоф Аендерл

8

С сайта LESS :

Если вы хотите импортировать файл CSS и не хотите, чтобы LESS обрабатывал его, просто используйте расширение .css:

@import "lib.css"; Директива будет оставлена ​​как есть и в итоге будет выводиться в CSS.

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


14
Это не будет ИМПОРТИРОВАТЬ файл, оно оставит директиву @import нетронутой. Это все еще будет работать, но вы должны избегать css-import - посмотрите этот developer.google.com/speed/docs/best-practices/…
Alex

5
Спасибо за информацию @jitbit. Лично мне легче использовать @importво время разработки, затем объединять и минимизировать импортированные файлы в единую таблицу стилей при переходе в производство.
webdevkit

1
Если вы внимательно прочитаете вопрос (а не только строку заголовка), вы увидите, что OP хочет сослаться на класс в файле css как на миксин, что невозможно, если он просто анализируется как простой импорт css.
благоговение

7

Попробуй это :

@import "lib.css";

Из официальной документации:

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


Источник: http://lesscss.org/


2
Если вы внимательно прочитаете вопрос (а не только строку заголовка), вы увидите, что OP хочет сослаться на класс в файле css как на миксин, что невозможно, если он просто анализируется как простой импорт css.
благоговение

6

Если вы просто хотите импортировать CSS-файл в качестве ссылки (например, чтобы использовать классы в Mixins), но не включаете весь CSS-файл в результат, который вы можете использовать @import (less,reference) "reference.css";:

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

* Результат (my.css) с lessc my.less out/my.css*

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

я использую lessc 2.5.3


Это было то, что мне было нужно. Тем не менее, я должен был использовать удлинять синтаксис: &:extend(.reference-class all);. Прямая ссылка на класс привела к ошибке компиляции.
Йенс Нойбауэр

4

Если вы хотите импортировать файл css, который должен быть обработан как менее, используйте эту строку:

.ie {
  @import (less) 'ie.css';
}

3

с 1.5.0 вы можете использовать ключевое слово inline.

Пример: @import (inline) "not-less-compatibility.css";

Вы будете использовать это, когда файл CSS может быть менее совместимым; это потому, что хотя Less поддерживает большинство известных стандартов CSS, в некоторых местах он не поддерживает комментарии и не поддерживает все известные хаки CSS без изменения CSS. Таким образом, вы можете использовать это, чтобы включить файл в вывод, чтобы все CSS были в одном файле.

(источник: http://lesscss.org/features/#import-directives-feature )

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.