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

Вы можете импортировать файлы .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...? Или я неправильно ссылаюсь...?!

Ответ 1

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

@import (css) "lib";

выводит

@import "lib";

@import (less) "lib.css";

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

Ответ 2

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

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

Ответ 3

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

Per Fractalf answer, это исправлено в версии 1.4.0

Ответ 4

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

@import (less) "foo.css"

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

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

Ответ 5

На веб-сайте LESS:

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

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

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

Ответ 6

Попробуйте следующее:

@import "lib.css";

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

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

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

Ответ 7

Если вы просто хотите импортировать CSS файл в качестве ссылки (например, использовать классы в Mixins), но not включает весь файл 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

Ответ 8

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

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

Ответ 9

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

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

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

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