asp.net - Can't get LESS to compile Imports -

i using visual studio 2012 web essentials 2012, latest version. following direction article http://www.cutterscrossing.com/index.cfm/2013/5/20/skinning-bootstrap-tabs. have @import directives in less files , when save file css file created. however, nothing in css file. i've checked path, paths appear valid.

my file structure is...

a new empty web site called

 bootstrapless project      css folder         bootstrap folder             bootstrap less files         core folder             css folder                css files generated less files in core folder             core.less             overrides.less             variables.less      img folder         bootstrap folder             bootstrap glyphicons-halflings png files      js folder         bootstrap folder             bootstrap js files 

in custom variables.less file have...

 @iconspritepath:          "../../img/bootstrap/glyphicons-halflings.png";  @iconwhitespritepath:     "../../img/bootstrap/glyphicons-halflings-white.png"; 

the variables.css output created upon save empty

in custom overrides.less file have...

 @import "variables.less";    [class^="icon-"],  [class*=" icon-"] {     background-image: url("@{iconspritepath}");  }   /* white icons optional class, or on hover/focus/active states of elements */  .icon-white,  .nav-pills > .active > > [class^="icon-"],  .nav-pills > .active > > [class*=" icon-"],  .nav-list > .active > > [class^="icon-"],  .nav-list > .active > > [class*=" icon-"],  .navbar-inverse .nav > .active > > [class^="icon-"],  .navbar-inverse .nav > .active > > [class*=" icon-"],  .dropdown-menu > li > a:hover > [class^="icon-"],  .dropdown-menu > li > a:focus > [class^="icon-"],  .dropdown-menu > li > a:hover > [class*=" icon-"],  .dropdown-menu > li > a:focus > [class*=" icon-"],  .dropdown-menu > .active > > [class^="icon-"],  .dropdown-menu > .active > > [class*=" icon-"],  .dropdown-submenu:hover > > [class^="icon-"],  .dropdown-submenu:focus > > [class^="icon-"],  .dropdown-submenu:hover > > [class*=" icon-"],  .dropdown-submenu:focus > > [class*=" icon-"] {    background-image: url("@{iconwhitespritepath}");   } 

on save, web essentials creates overrides.css following...

 [class^="icon-"],  [class*=" icon-"] {    background-image: url("../../img/bootstrap/glyphicons-halflings.png");  }  /* white icons optional class, or on hover/focus/active states of elements */  .icon-white,  .nav-pills > .active > > [class^="icon-"],  .nav-pills > .active > > [class*=" icon-"],  .nav-list > .active > > [class^="icon-"],  .nav-list > .active > > [class*=" icon-"],  .navbar-inverse .nav > .active > > [class^="icon-"],  .navbar-inverse .nav > .active > > [class*=" icon-"],  .dropdown-menu > li > a:hover > [class^="icon-"],  .dropdown-menu > li > a:focus > [class^="icon-"],  .dropdown-menu > li > a:hover > [class*=" icon-"],  .dropdown-menu > li > a:focus > [class*=" icon-"],  .dropdown-menu > .active > > [class^="icon-"],  .dropdown-menu > .active > > [class*=" icon-"],  .dropdown-submenu:hover > > [class^="icon-"],  .dropdown-submenu:focus > > [class^="icon-"],  .dropdown-submenu:hover > > [class*=" icon-"],  .dropdown-submenu:focus > > [class*=" icon-"] {    background-image: url("../../img/bootstrap/glyphicons-halflings-white.png");  } 

the last custom less file in core folder core.less file. file has following imports...

 @import "../bootstrap/bootstrap.less";  @import "overrides.less"; 

when saved empty css file created. again, empty.

is there i'm missing. i've been on instructions few times , seems right.

thanks

you should not save less file, compile them leveraging less compiler.

see http://vswebessentials.com/features/less how compile less files web essentials.

you can set compiler settings tools -> options. include:

1. compile on save
2. compile on build
3. enable minification