Can Asp.net MVC Bundle transform LESS in CSS?

Question

I have a project in Visual Studio 2015 with Asp.Net MVC 5.

All my css and js files are referenced by bundle ( BundleConfig class + @Styles , @Scripts in cshtml pages).

Now i'm considering to use a .less file, instead a css file.

So, how will I refer this file in bundle? And the most important, can bundle (or something else) automatically convert .less in .css, or I need to do it manually?

Answer 1

You might consider using Mads Kristensen's Web Compiler visual studio extension. This works in your local development setup(VS) and MS builds!.

So basically you will use this extension to generate css files from your .LESS files. You can use these generated css files when you bundle it.

Once you install the extension, you can right click on the less file, select Web Compiler=> Compile file.

This will generate the css file from LESS file. It will also add a file called compilerconfig.json which is more like a settings file. You can do more settings like enabling the recompilation on pre/post build by right clicking on this file.

So for evey LESS file you do this, it will add an entry to the compilerconfig file JSON file.

[
  {
    "outputFile": "Content/MasterStyles.css",
    "inputFile": "Content/MasterStyles.less"
  },
  {
    "outputFile": "Content/AdminStyles.css",
    "inputFile": "Content/AdminStyles.less"
  }
]

Now in your Bundle config, you can use the 2 css files generated for bundling.

The extension also supports minifying the files. you can enable/disable by updating the settings json file.