How to use bootstrap less?

Question

Less

For the first time, I decided to try to write a bootstrap project on less, rather than rewriting the bootstrap styles after the fact in my style.css. But I can't figure out how it works.
1. I go to the folder - npm install [email protected]
2. I copy the folders from node_modules/bootstrap/dist to this folder
3. I create test.less
4. for example, I want to use only typography and change the font and color. I write:

@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. I save (on saving, the data must be updated in the test.css file. It gives an
error:

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

I don't understand what the problem is. Is there any step by step guide on how to use less and how to use bootstrap especially for BEM?

Answer 1

Even using only typography, you need to include files with predefined variables, as well as with mixins, because they are actively used in all parts of
bootstrap

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