ASP.net: applying variables.less changes

Question

I'm pretty new in the use of less files and I'm staked in the attempt of changing the value of some constants in variables.less.

I already tried many solutions like the ones described here or here. I'm struggling because even if I change the variables.less file redefining the constants I want to change, the browser shows the same output as with the former variables.less, as it was not changed at all.

I recompiled with Web Compiler all the less files I modified. I also tried to use the "Build->Recompile all files in the solution" menu item, without success. I added the file to the compilerconfig.json using the right button menu item "Web Compiler->Compile File" and I tried also to run the compiler directly from the Task Runner Explorer. Everything seems to work during compilation, but when I restart the web site (I'm still using the IIS Express to debug the website) the changes aren't applied.

What I'm trying to change are the constants:

    @table-cell-padding:            8px;
    @table-condensed-cell-padding:  5px;

that change the style of a bootstrap table to a more compact table. I simulated with success this change modifying the padding values directly using the Chrome browser inspector. I did it with success also changing the padding in the style.css, that in the layout is now defined before the bootstrap.css:

    <link rel="stylesheet" href="~/css/style.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />

I've tried to create a new custom.less in a separate (../shared) folder calling the bootstrap variables.less file as in the following code.

    @import "../less/variables.less";

    @table-cell-padding:            5px;
    @table-condensed-cell-padding:  2px;

with no success.

Debugging using Chrome I've found that no matter what I do, the code inspection shows always the former values of the constants, even if these constants have been changed also in the variables.less file.

Any suggestion is appreciated.

Just importing and compiling `variables.less` is not enough (if you test your `custom.less` result you'll see it's empty). You need to recompile the `bootstrap.css` itself (e.g. by importing `bootstrap.less` into your `custom.less`) if you want to override variables there... (then obviously use your resulting `custom.css` instead of the original `bootstrap.css`). — seven-phases-max, Apr 07 '16 at 16:53
Thank you seven-phases-max. Even if the reply was not the one I was looking for, you inspired me the solution of the problem, opening my eyes about the checking the content of the bootstrap.css. — Leonardo Daga, Apr 07 '16 at 23:36

score 0 · Answer 1 · answered Apr 07 '16 at 23:35

I just discovered that the problem was another bootstrap.css file (in \bootstrap\dist\css) in a folder hiding the compiled one (in \bootstrap\less).

I had to set properly the compilerconfig.json generated with the Web Compiler to write over the bootstrap.css file pointed by the _Layout.cshtml.

So the operations I recommend to create a custom less file for variables are the following:

create a custom.less file in the same or a parallel directory (ex.: ../shared) of the variables.less file; add in the custom less file the reference to the variables.less file and the new definition of the constant (ex.: cell padding for tables);
```
@table-cell-padding:            5px;
@table-condensed-cell-padding:  2px;
```

add the reference to the custom.less file in the bootstrap.css file soon after the variables.less

// Core variables and mixins
@import "variables.less";
@import "../shared/custom.less";
@import "mixins.less";

compile the modified less files with web compiler (install it from Tools->Extensions and Updates if you don't have it);
check into bootstrap.css that the custom values are properly changed as the ones you set in custom.less;
check in compilerconfig.json that the file bootstrap.css that you are creating with compilation is the same referred in _Layout.cshtml; In case, modify the outputFile of the json file to overwrite the bootstrap.css referred in the _Layout.cshtml file;
rebuild and restart the website;

ASP.net: applying variables.less changes

1 Answers1