I am using visual studio 2012 with web essentials 2012, latest version. I am following the direction from this article http://www.cutterscrossing.com/index.cfm/2013/5/20/Skinning-Bootstrap-Tabs. I have @import directives in the less files and when I save the file a css file is created. However, nothing is in the css file. I've checked the path, but the paths appear valid.
My file structure is...
A new empty web site called
bootstrapless project
css folder
bootstrap folder
All bootstrap less files
core folder
css folder
All css files generated from less files in core folder
core.less
overrides.less
variables.less
img folder
bootstrap folder
bootstrap glyphicons-halflings png files
js folder
bootstrap folder
All bootstrap js files
In the custom variables.less file I have...
@iconSpritePath: "../../img/bootstrap/glyphicons-halflings.png";
@iconWhiteSpritePath: "../../img/bootstrap/glyphicons-halflings-white.png";
The variables.css output created upon save is empty
In the custom overrides.less file I have...
@import "variables.less";
[class^="icon-"],
[class*=" icon-"] {
background-image: url("@{iconSpritePath}");
}
/* White icons with optional class, or on hover/focus/active states of certain elements */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [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 > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:focus > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"],
.dropdown-submenu:focus > a > [class*=" icon-"] {
background-image: url("@{iconWhiteSpritePath}");
}
On save, web essentials creates an overrides.css with the following...
[class^="icon-"],
[class*=" icon-"] {
background-image: url("../../img/bootstrap/glyphicons-halflings.png");
}
/* White icons with optional class, or on hover/focus/active states of certain elements */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [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 > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:focus > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"],
.dropdown-submenu:focus > a > [class*=" icon-"] {
background-image: url("../../img/bootstrap/glyphicons-halflings-white.png");
}
The last custom less file in the core folder is the core.less file. This file only has the following imports...
@import "../bootstrap/bootstrap.less";
@import "overrides.less";
When saved an empty css file is created. Again, empty.
Is there something I'm missing. I've been over the instructions a few times and everything seems right.
Thanks