Can Visual Studio 2013 Generate CSS Files from .Less Files

Can Visual Studio 2013 generate CSS files from .less files?

Yes. While Visual Studio 2013 doesn't come with a LESS compiler built-in (so you'll need to bring your own), you can either use an external compiler, or install an extension so you can compile your LESS files from within the IDE.

How to compile Bootstrap LESS source in VS 2013

For the record the current Web Essentials will re-compile any compiled files when edits occur, including non CSS generating files like variables.less. You just need to manually edit them the first time to put them into this mode. For example the procedure for new projects which want to re-brand Bootstrap variables is:

  1. Make sure the current Web Essentials Visual Studio package is installed.
  2. Add the Bootstrap Source NuGet package to the site.
  3. Manually edit the files you want automatically generated normally, e.g. /Content/bootstrap/bootstrap.less and theme.less. When you save the first compilation will occur, generating .css and min.css as related items in the Solution Explorer.
  4. Now when you edit related files (e.g. variables.less to do branding) the compiled bootstrap and theme CSS is automatically updated during build.

The only dirty part about this is the first time you have to edit the original source, changing the timestamp. Hopefully that does not cause problems with updates to the NuGet package in the future.

There is an open issue in the Web Essentials project about this. One simple solution is to get the context menu option to do it manually the first time, the other is a permanent setting on the file in Visual Studio, such as the build action or custom tool action.

https://github.com/madskristensen/WebEssentials2013/issues/1632

You can change the behaviour of recompilation in the Visual Studio "Tools - Options - Web Essentials - LESS" settings.

Using LESS with MVC5 in Visual Studio 2013 with Web Essentials

When you add a .less file and save, the Web Essentials will compile and generate the .css and .min.css files. You will see an arrow in your solution explorer, or you can also confirm in your file system that the files are in the same folder.

Minifying and publishing CSS and JavaScript using Visual Studio 2013 and LESS

I'm always excited to see someone tuning their website performance!

1) As long as you are referencing the bundles (and not the published files), publishing minified files will have negligible impact. The bundling system reads the files only once and caches a minified and bundled version in memory. The resulting bundle is identified with a hash that is included in the page and allows browser and proxy caching of the bundle. When your published files change, the bundle will be updated and the page will use the new bundle hash.

This answer has additional information on caching.

If you are interested in automating the "first request" explore Application Initialization

2) The Web Essentials extension by Mads Kristensen has minification support for CSS and JavaScript. As of Visual Studio 2013 Update 4 there is no built-in tooling that would create minified files.

How to re-use .less and generated CSS across projects?

The easiest way to share variables, mixins, and other LESS elements, is to use @import. If the external shared elements are in an accesible path, you can directly specify the whole path in the @import clause.

However, sooner or later you'll use Grunt in your web pojects. It's a task runner, and the tasks are things like copying files, compiling less to css, minifying, and so on. This is widely use to manage the front end components of your application, specially css and js.

In your particular case, you could use grunt to copy the less file from the central location, and then run a less task to generate the final css, .min.css and, if you want it the corresponding .css.map, which is really useful to debug the styles from the browser's console.

If you want to use grunt for this case, basically you have to create two grunt tasks:

  • a copy task, to copy the file from the central location. This is optional but advisable if you @import your global colors .less file in each applciation's particular LESS file
  • a less task, that compiles the .less files into .css

The tasks definition is done in a simple json file, packages.json, and a js file, gruntfile.js. Althoug it can seem daunting, you can have it up an running in a few hours.

If you look for Grunt in Visual Studio Gallery you'll at least find "Grunt launcher" that allows to easyly run this tasks from within Visual Studio. In VS 2015 you can use Web Essentials (and it's probably a native functionality, but I'm not sure). There is also the "Task Runner Explorer" (see the last link below).

If you google "visual studio grunt", you'll find interesting info like this:

  • Using Grunt, Gulp and Bower in Visual Studio 2013 and 2015
  • Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

Once you get used to it, you'll do a lot of things, like copying, compiling, transplining, concatenating, minifying, generating maps, etc. because this task runner has a lot of functionalities, and it's really easy to use.

NOTE: it's based on npm, which uses packages, in a similar fashion to Nuget, so you'll get the same advantages of using Nuget, but for front end artifacts. There are many packages available in npm which you will not find in Nuget



Related Topics



Leave a reply



Submit