(bootstrap version 3.3.1) how to configure less to css compilation?

Question

css

Hello, I'm using bootstrap 3.3.1 and I want to use less to change styles in bootstrap 3.3.1, but I don't know how to set it all up to make it work. Please tell us everything in detail how to connect less.

Answer 1

1. Create a style.less file in which you import the necessary bootstrap files (let them be in a separate folder so as not to get confused). For example:

@import "bootstrap/less/variables.less"
@import "bootstrap/less/mixins.less"
@import "bootstrap/less/normalize.less"
@import "bootstrap/less/mixins.less"
@import "bootstrap/less/buttons.less"

You can see the list of all files in bootstrap.less . If you need the whole bootstrap, you can just import this bootstrap.less.
2. Write your styles after imports or in a separate file, and include it in style.less with an import:

// Bootstrap
@import "bootstrap/less/variables.less"
...
@import "bootstrap/less/buttons.less"

// Project Styles
@import "project.less"

3. Compile LESS to CSS using the less npm package or the Prepros utility , as suggested . Include the resulting CSS file in your page.
To better understand LESS, you can take the online course Introduction to LESS .

Answer 2

npm install -g less
lessc styles.less > styles.css