Since Bootstrap v.4 release, front-end developers who prefer LESS, have lost the possibility to reference its source files in their styles, due to the Bootstrap migration to SASS.

I will not delve into the reasons behind the switch but you can get an idea from these answers and this post about SASS vs LESS.

However, thanks to Node.js, you can convert SASS files easily into LESS ones, and be able to reference them just like before!

In this tutorial I will show you how to accomplish this while automating the process, so you can easily re-use it in your Bootstrap-based projects.
This guide is meant for beginners and users new to Node.js, so I will try to keep things as simple and plain as possible.

First of all, we need Visual Studio Code and Node.js, so go ahead and install both if you don’t have them yet.

Now download the Bootstrap source zip, extract the scss folder and paste it in your project (eg. inside assets/styles/bootstrap).

There are of course other ways to include the Bootstrap source files in your project, as well as other libraries (like FontAwesome), but this guide is not about them.

In order to begin, we need to start VS (Visual Studio Code), add our project’s folder to the workspace and create a package.json file, which will tell npm (Node.js Package Manager) what to do with our project.

Make sure the terminal is open (if not, go to View and show it – keyboard shortcuts depends on your keyboard lang, so I won’t mention it) and that it’s ready for input (you will see that you should be in your project’s folder).

Type npm init .
This will start a guided process with questions, assisting you in the creation of the package.json file.

Once that is done and the file is now in your project’s root, we can start with the SASS to LESS conversion stuff.

We will need some Node’s packages in order to perform certain actions (same concept as libraries like jQuery for Javascript, or PHP libraries, whatever makes most sense to you).

One of them is gulp, which is best you save as a global package (re-usable in any project, not just this one).
So let’s go ahead and type in the terminal npm install gulp --save-g
We just told npm to go ahead and retrieve the latest gulp package version, install it and save it as a global (and package) dependency in our package.json .
We need another package now, that runs on top of gulp: gulp-run-command .
Let’s type npm install gulp-run-command --save-dev
This time, after installing the package, this dependency will be added only to this specific project.

In case you are wondering: the reason why you shouldn’t add all/any packages globally, is that each package might require other packages (npm checks that for you and downloads them automatically) and you might soon end up with GB of packages in your hdd that you only used once for some project.

Before going right into the conversion process, we need a couple more packages.
Type npm install less-plugin-sass2less less-plugin-functions --save-g
These are the set of functions that will do the actual conversion.

What we need now is to create a gulpfile.js , which is essentially the gulp package configuration file.

Now, all we need to tell our gulpfile, is to include gulp itself and the other package for it, that we just installed, or it won’t understand the commands we put in the file.

In order to do so, just add at the top of the file:

var gulp = require('gulp');
var run = require('gulp-run-command').default;

Now we are ready to add a task (which, after all, what gulp is for).

Keep adding this to the file:

// Convert SASS to LESS
gulp.task('conv1', run("sass2less assets/styles/bootstrap/scss/_variables.scss 'assets/styles/bootstrap/less/_variables.less'"))
gulp.task('conv2', ['conv1'],  run("sass2less assets/styles/bootstrap/scss/_grid.scss 'assets/styles/bootstrap/less/_grid.less'"))
gulp.task('conv3',  ['conv2'], run("sass2less assets/styles/bootstrap/scss/mixins/_grid-framework.scss 'assets/styles/bootstrap/less/mixins/_grid-framework.less'"))
gulp.task('convertSASStoLESS',  ['conv3'], run("sass2less assets/styles/bootstrap/scss/mixins/_grid.scss 'assets/styles/bootstrap/less/mixins/_grid.less'"))

In essence, we are converting the SASS Bootstrap source files, into LESS files and saving them somewhere else ( assets/styles/bootstrap/less ).
You are free of course to change which files are being converted and where, this is only an example which will make Bootstrap variables, as well as the grid builder, available for reference in your styles, in LESS.

You may notice that the last task has a different name convertSASStoLESS , compared to the other ones, but that’s only because it’s an easier name to remember later, when we will instruct our package.json to execute this particular task, which in turn will callback its previous one and so on.

Save your gulpfile.js and let’s wrap things up!
The last step will allow you to automate the conversion process, as well as installing the necessary packages in seconds, without having to go through the whole set up, each time.

In your package.json file, add right before the Dependencies:

"scripts": {
"convertSASStoLESS": "gulp convertSASStoLESS"
},

Save the file and type in the terminal:
npm run-script convertSASStoLESS

The terminal will log the results and you will see your newly converted files in your project!

Next time, all you will have to do is:
– make a new project folder
– have the Bootstrap source files in it
– add in the gulpfile.js you just made
– type npm init to create the package.json (this time it will detect the necessary packages on its own)
– add in the package.json the scripts instruction
– run npm install in the terminal (this will install all dependencies – the required packages) AND run our gulp tasks!

There is currently an issue with the conversion of certain parts of the Bootstrap files, using the sass2less package, since SASS allows for functions that LESS doesn’t have. In case you see errors, after importing the newly converted LESS files in your styles, check the status of the issue. While the issue is being fixed, you can use this npm package instead: bootstrap-less-port

You could even use gulp to mix & merge SASS, LESS and CSS files if you wanted to (in this case, not for reference, just in case you like to code in both SASS and LESS and only need a combined CSS in the end).

Another way to do this, without having to setup the package.json nor the gulpfile.js , would be to simply install the Easy Compile VSCode extension, which integrates the sass2less package (the one we used in the tutorial) directly.
That way, you can reference an scss file, right into your less , without even having to convert it.
However, since the sass2less package, currently cannot convert certain SASS functions (because they do not exist or have a real alternative in LESS), you might want to stick to the bootstrap-less-port package, for now.

Happy coding!