Skip to content

Instantly share code, notes, and snippets.

@colin-han
Last active June 9, 2016 06:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save colin-han/6077388 to your computer and use it in GitHub Desktop.
Save colin-han/6077388 to your computer and use it in GitHub Desktop.
Build LESS by msbuild
<!--
Usage:
1. Download this file into your project folder, named it as "Less.targets"
2. Use notepad to open your project file (e.g. Example.csproj), and put following code to above of end element 'Project'.
<Import Project="Less.targets" />
3. Change element type of *.less file in your project file to "LessCompile".
You need to do that manual first time. After that, you can change the file's "build action" to 'LessCompile' through PropertyGrid.
4. Close notepad and reload your project in VisualStudio. Then press F6 to build your project.
You will found the css file will be generated by build process automatically.
-->
<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<CompileDependsOn>
CompileLess;
$(CompileDependsOn);
</CompileDependsOn>
</PropertyGroup>
<PropertyGroup>
<LessBuildConfigurations>--no-color</LessBuildConfigurations>
</PropertyGroup>
<ItemGroup>
<LessCompileArgs Include="@(LessCompile -> '&quot;%(fullpath)&quot; &quot;%(rootdir)%(directory)%(filename).css&quot;')" />
</ItemGroup>
<Target Name="CompileLess">
<Message Text="Compiling Less files" />
<Message Text="Executing lessc $(LessBuildConfigurations) %(LessCompileArgs.Identity)" />
<Exec Command="&quot;$(APPDATA)\npm\lessc.cmd&quot; $(LessBuildConfigurations) %(LessCompileArgs.Identity)" />
</Target>
</Project>
@nagaraj83
Copy link

For step3, could you please help. I am trying to use in a VS2013 application and i am not sure where i should change for step3

@colin-han
Copy link
Author

colin-han commented Jun 9, 2016

For first less file in your project. You need to edit csproj file by manually. Please open csproj file by any text editor. Then find anyone of your less file. The element would be like follow:
<Content Include="yourfilename.less" />

Change element type to CompileLess just like following:
<CompileLess Include="yourfilename.less" />

Reload your project in Visual studio. Select your less file in Solution Explorer, then press "F4" key to open property grid of this file item. You will found the "Build Action" property is changed to "CompileLess".

After you do all above actions, you will find "CompileLess" build action is available for any file. If you add new Less file, please make sure change its Build Action to "CompileLess" through property grid.

Anyway, this solution is little complex, and need more manual operations. I suggestion you to use "dotless" nuget package to compile less file in asp.net runtime. please see reference to: dotless

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment