Search code examples
javascriptasp.netcsslessdotless

Less compilation on client-side

I have a .LESS stylesheet, I found a way to change variables value throw JavaScript with an old modified version of less.js

https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc)

the problem is that worked well on the designing stage because I was compiling the .LESS with the browser, now I'm building the site with asp.net, I decided to use dotless, the problem with compiling the .LESS file in the server is that dynamic variables convert to static, delete my variables and do not let me change the value throw JS.

The question is, Is there a way to say asp.net that the .LESS file must be compiled by the browser on the client?

Because just importing the .LESS file and the JS file in my html page doesn't work,

    <link href="~/Content/css/UI.less" rel="stylesheet/less" type="text/css" />

the browser doesn't find the .LESS file and respond with a 404 HTTP Response. Does asp.net hide that file or something?

PD: I already tried not adding the dotless dependency to the project which supposedly compile the .LESS file

Solution

  • Use dotless if your want the server to compile the LESS stylesheet. Use the less.js file if you want to compile in the browser. Also, instead of the appcmd command you can tell Web.config that your application will serve .less files

    <staticContent>
        <remove fileExtension=".less" />
        <mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>

    This way, you don't have to run appcmd if you deploy your code to another machine.