Visual Studio 2012 and LESS

The best way to use LESS with visual studio 12 is thru  Web Essentials 2012. Install Web Essentials 2012 by going to Tools/Extensions -> Updates. In the search bar  type “Web Essentials 2012”. Click on the result and install.

After installing (restart visual studio),  do the following  Tools -> Options -> Select Web Essentials -> select LESS.  Set “Compile to CSS folder” . This will compile your .less files into .css files and store them in css directory under less directory. Select  “Generate CSS files on save” to TRUE.

If your style.less file is in LESS directory, make sure to create an empty CSS directory and an empty style.css file under LESS. This file will be updated by Web Essentials at the time of compiling. When I did not have CSS directory and an empty file with the same name but with css extension, web extension did not create the css file.

On your html document, link to the .css file (not the .less file).  You don’t need less.js file with  VS/Web Essentials.  And if you are lucky then you are done! Just edit less file, and while saving web essentials will update the css file and life will be good.

However, if you are not lucky, then you may find that web essential keep crashing your visual studio while compiling (And this problem triggered this blog post, my machine is Win8, Visual Studio 2012 update 1 and  Web essentials 2012 version 2.6).  And if you set Tools->Options -> Web Essentials -> LESS -> ‘Compile on build’ to False, then visual studio will stop crashing but your css will not be update.  Now, you have one more option to go to the less.js route.

Get the less.js and include the files in your html as follows:

less1

Notice now you are referring LESS file in your html document.

Here is the less file.

body {
      background-color: Blue;
      color: white;
      font-family: "Trebuchet MS";
}

@media screen and (max-width: 900px) {
     body {
         background-color: red;
    }
}

Now if you will press F5, you will get the following error:

less2

To get away from this error,  you need to add the .less MIME type to the Cassini server. Other option you have is to configure your visual studio to run IIS Express server. Right click on project and choose IIS Express server. This will make F5 run in IIS express server.

 To add the .less extension as a valid MIME type to IIS express follow these steps:

Open a windows command prompt (admin)

Switch to the directory that IIS Express is installed

Execute the following command:

C:\Program Files (x86)\IIS Express>appcmd set config -section:staticContent /+[fileExtension=’.less’,mimeType=’t’]

Applied configuration changes to section “system.webServer/staticContent” for “MACHINE/WEBROOT/APPHOST” at config

commit path “MACHINE/WEBROOT/APPHOST”

However, if you don’t want to run your Visual studio under IIS Express, then add the following line in web.config

 

<configuration>
   <system.webServer>
          <staticContent>
<mimeMap fileExtension=".less" mimeType="text/css"/>
          </staticContent>
</system.webServer>
</configuration>

Once you add these lines in your web config, F5 should run your site and you can see the LESS in action. The media query will show your hellow world in a responsive UI.

Final solution Compile LESS to CSS and then refer CSS in your HTML file

less.js will be performance hit, so if you want to compile the less to css and then only refer the css in your html then get the lessc compiler from here.  If you have put the lessc in c:\less then type the following command in “Pre-build event  command line” (right click on your project -> Properties -> Build Events):

c:\less\lessc&nbsp; ..\.\LESS\style.less   ..\.\LESS\CSS\style.css

provided your less file is in less and css file is under less\css\. Now go ahead and refer css in your code and delete the reference of less.js from your html file.

<linkhref=”LESS/CSS/style.css” rel=”stylesheet”/>

Note: I ended up using this solution as less.js was not forming my css properly.

 Last, how to get the intellisense for LESS:

Tools -> options -> TextEditor -> FileExtension -> type less in extension and in editor choose CSS Source Editor and click ‘Add’. If you less file is open, close and re open it.

Advertisements

2 thoughts on “Visual Studio 2012 and LESS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s