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

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

@import (css) "lib";

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

@import "lib";

и

@import (less) "lib.css";

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

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

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

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

@import (less) "foo.css"

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

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

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

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

С сайта LESS :

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

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

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

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

@import "lib.css";

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

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

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

Если вы просто хотите импортировать 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

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

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

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

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

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

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