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:
- Make sure the current Web Essentials Visual Studio package is installed.
- Add the Bootstrap Source NuGet package to the site.
- 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.
- 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
Make Bootstrap Carousel Responsive on Height
Putting a Border Around Floating Elements
Strange Z-Index Behavior with Scrollbars Under Chrome
Creating 3 Perfectly Equal Columns That Take Up 100% on The Browser Window Width
@Media: If Samsung Galaxy S4 Is 1920X1080
CSS How to Position an Element in a Middle (Half Height/Vertical 50%) of Another Element
How to Set The Background-Position to an Absolute Distance, Starting from Right
Min-Width for Column in Bootstrap Grid System
How to Get a Custom Scroll in Firefox and Ie
How to "Snap to Pixel" After a CSS Translate
CSS: Define Media Query Within One Class
How to Style Form Drop Down Lists
Float a Div in Top Right Corner Without Overlapping Sibling Header