Using LESS with ASP.NET Core

I have already written about the advantages of a CSS preprocessor like LESS in this post. Today I want to show you how you can easily implement support for such a preprocessor in your ASP.NET Core project. I will use Gulp to create the ability to write LESS files and convert them to CSS files so that they can be integrated into the ASP.NET Core application. Finally, I will automate the whole thing so that the LESS file is converted without manual interaction on every build.

To convert from LESS to CSS I use Gulp. Gulp is a workflow automation tool for JavaScript. This allows me to implement the whole thing per npm into my ASP.NET core project. I don’t have any node packages in use yet, so I need a new package.json file first. I don’t create it with Visual Studio because I didn’t get it to work correctly. You are welcome to try it, but if it doesn’t work either, try the following:

Start the setup wizard using npm init, and fill in the configuration as needed. Then I need the following dependencies, which will be added to the dev-dependencies section. After adding them. the area will look something like this:

Now I need to setup gulp using a new file called gulpfile.js: