Visual studio - precompile - dotless

Question

I wonder if there is a way to precompile *.less files(http://www.dotlesscss.org/) with visual studio.

The site gives me a dotless.compiler.exe but I am not sure how to hook this up to visual studio. I am looking for a solution for both Webforms and ASP.NET MVC.

Ehtelehud

Answer 1

Depending on your build environment, you can kick off dotless.Compiler.exe as a build task.

For example, using a Pre-Build task in Visual Studio (all 1 line):

$(SolutionDir)Tools\dotLess\dotless.compiler.exe -m 
    $(ProjectDir)content\css\site.less $(ProjectDir)content\css\site.css

The macros ($(SolutionDir), etc) allow a bit of flexibility to project and file locations. Rather than using the standard .less files, simply reference the new .css files in your markup.

Fascist

ALL IN ONE LINE is very important otherwise you will get MS Build error. The command exicted with shit -1. – Gerhan

Regarding portability: don't forget to enclose each parameter of your command in quotes as build tasks are executed as a batch file and batch cannot handles spaces in directory names. Example: "$(ProjectDir)..\..\..\..\lib\dotless\tool\dotless.compiler.exe" "$(ProjectDir)Styles\Home.less" "$(ProjectDir)Styles\Home.css" – Wrac

Answer 2

All,

After using just about all the alternatives discussed here and not being satisfied, I wrote a LessCss compiler addin for Visual Studio. It takes .less files and generates .css files only when the .less file changes. It uses the latest and greatest less.js compiler.

See it in use here.

Download the signed extension.

Source code is here.

I just submitted it to the VS extension gallery. Hopefully it will be up there soon but in the meantime please install (or compile then install) and check it out.

Gonyea

I saw the video and it looks just exactly the thing I was looking for. I can't install it, though. The installer apparently works, but it doesn't not appear in Visual Studio. Do you know why this might be happening? – Pogey

BTW, was it approved in the VS Extension Gallery? I can't find it there. – Pogey

I managed to install it now. I followed this: msdn.microsoft.com/en-us/library/ee814429.aspx, but I'm not sure it was what solve the problem. – Pogey

hey thanks for installing it. i submitted to VS gallery and never heard back. I'll try again. – Gonyea

@Steve Potter I installed your plugin but in the property window from my .less file i don't get the option "LessCss" with Custom Tool. – Thumbprint

Answer 3

Phil Haack to the rescue: http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

Whenever you want to have something generated in your solution at compile time, T4 is usually the way to go...

Aperiodic

Also the T4 templates are now part of the dotless project and get generated by the buildserver on every commit (Phil's templates are now out of date). You can get the latest t4css from the dotless buildserver by clicking the download button on our website dotlesscss.com – Negligence

Answer 4

Here's the solution I came up with, using MSBuild. It's incremental, so it should only happen when the Less changes. It also correctly handles @import.

First, add dotless to your project with NuGet. You don't need any of the magic it adds to your web.config, so you can revert that - you're just using it to get the compiler executable.

Next, add your "root" Less files to your .csproj, like so:

<ItemGroup>
    <LessCssRootInput Include="example.less" />
</ItemGroup>

Finally, add this snippet at the bottom of your .csproj:

<ItemGroup>
    <LessCssSubInput Include="**\*.less" Exclude="@(LessCssRootInput)" />
    <LessCssOutput Include="@(LessCssRootInput -> '%(RelativeDir)\%(Filename).css')" />
</ItemGroup>
<Target Name="CompileLessCss" BeforeTargets="Compile" Inputs="@(LessCssRootInput);@(LessCssSubInput)" Outputs="@(LessCssOutput)">
    <Exec Command="&quot;$(SolutionDir)\packages\dotless.1.3.1.0\tool\dotless.compiler.exe&quot; --minify --keep-first-comment @(LessCssRootInput)" />
</Target>

Poseur

Does it automatically include the files on the project? Or I still have to show all files, then include generated files manually? Please answer.. thank you! – Dialyze

You don't need to tell it about Less files that are only included from other files. Those get included automatically by the "***.less" pattern. But you do need to tell it about the "root" Less files that do the including (in LessCssRootInput). It will produce one CSS file per "root" Less file. – Poseur

In the dotless 1.6.7 package there is no tools folder with a binary (exe). – Pontius

I have added this in my csproj under VS2017. But how it works? Is it auto-compile the less file changes on the save click or something else. Please explain more. – Daryldaryle

Answer 5

There is also another way to precompile during development.

The dotless project features a commandline compiler (dotless.Compiler.exe) that can compile and minify the CSS.

You can also use the compiler.exe with the --watch parameter where it will keep running and scan your input file for changes, regenerating whenever you make changes to the file. Thus making you independent from Visual Studio.

Negligence

That's why we wrote that feature.. Got too many questions from php developers who'd love to use dotless but didn't care about all the .NET specific stuff. And dotless is after all only one exe and one dll, as opposed to ruby. – Negligence

Answer 6

In my search for working with DotLess I also found this library:

http://www.codethinked.com/post/2010/03/17/Bundler-Now-Supports-Css-And-less.aspx

Adding it to my own question because it might help others.

Ehtelehud

Answer 7

You may want to take a look at Chirpy. It has a lot more support than just LESS. I wish I would have found it prior to writing my own.

Speaking of which I also wrote a Visual Studio Custom Build Tool that executes using the JS file (instead of the .NET port) you can take a look at the source here: https://github.com/paultyng/JsBuildTools

Or it is also on the extensions gallery under JsBuildTools.

Aesop