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

Чи можете ви імпортувати .css файли у .less файли ...?

Я досить мало знайомий з меншим і використовую його для всього свого розвитку. Я регулярно використовую структуру так:

@import "normalize";

//styles here

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

Увесь імпорт - це інші файли, що не містять файлів, і працює як слід.

Моя поточна проблема така: я хочу імпортувати .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)а не (css).

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

Змініть розширення файлу CSS на .less. Вам не потрібно писати в цьому МЕНШЕ; всі CSS дійсні МЕНШЕ (за винятком речей MS, які вам доведеться уникати, але це інша проблема.)

За відповіддю Фракталфа це зафіксовано в версії 1.4

З сайту МЕНШЕ :

Якщо ви хочете імпортувати файл CSS, і не хочете, щоб НЕ МОЖЛО обробляти його, просто скористайтеся розширенням .css:

@import "lib.css"; Директива просто залишиться такою, якою є, і залишиться у висновку CSS.

Як вказує jitbit у коментарях нижче, це дійсно корисно лише для цілей розвитку, оскільки ви не хочете, щоб у вас було зайве @importспоживання дорогоцінної пропускної здатності.

Спробуйте це :

@import "lib.css";

З офіційної документації:

Ви можете імпортувати як файли css, так і менше. Обробляється лише менше заяв про імпорт файлів, а файли css - файли імпорту зберігаються як є. Якщо ви хочете імпортувати файл CSS, і не хочете, щоб НЕ МОЖЛО обробляти його, просто скористайтеся розширенням .css:

Джерело: http://lesscss.org/

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

мій

 @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 u може використовувати ключове слово "inline".

Приклад: @import (inline) "не менш сумісний.css";

Ви будете використовувати це, якщо файл CSS може бути менш сумісним; це тому, що хоча Менше підтримує більшість відомих стандартів CSS, він не підтримує коментарів у деяких місцях і не підтримує всі відомі хаки CSS, не змінюючи CSS. Таким чином, ви можете використовувати це, щоб включити файл у висновок, щоб усі CSS знаходилися в одному файлі.

(джерело: http://lesscss.org/features/#import-directives-feature )