Как использовать bootstrap less?

Question

[angelzzz]

Впервые решил попробовать написать проект bootstrap на less, а не переписываю постфактум стили bootstrap в своем style.css. Но не могу разобраться как это работает.

1. захожу в папку - npm install bootstrap@3
2. копирую в эту папку папки из node_modules/bootstrap/dist
3. создаю test.less
4. например я хочу использовать только типографику и поменять шрифт и цвет. Я пишу:

@import "node_modules\bootstrap\less\type.less";

h1 {
  @headings-font-family: serif;
  @headings-font-weight: normal;
  @headings-line-height: 1;
  @headings-color: red;
  @headings-small-color: white;
}

5. сохраняю (по сохранению данные должны обновляться в файле test.css.

Выдает ошибку:

NameError: variable @headings-font-family is undefined in... line ... column ...

Не понимаю в чем проблема. Есть какое-то step-by-step руководство по использованию less и использованию bootstrap особенно для БЭМ?

Comments

[Сергей delphinpro]

Подключите вначале файлы variables.less и mixins.less
Первый содержит переменные, используемые фреймворком, второй - используемые миксины. (Хотя в конкретно в файле type.less миксины вроде не используются).

Answer 1

[Pavel1114]

Даже используя только типографику необходимо подключить файлы с заранее заданными переменными, а также с миксинами, потому как они активно используются во всех частях bootstrap
Допишите вначало

@import "node_modules\bootstrap\less\variables.less";
@import "node_modules\bootstrap\less\mixins.less";