Visual Studio 2012 と Web Essentials 2012 の最新バージョンを使用しています。この記事http://www.cutterscrossing.com/index.cfm/2013/5/20/Skinning-Bootstrap-Tabsの指示に従っています。less ファイルに @import ディレクティブがあり、ファイルを保存すると css ファイルが作成されます。ただし、css ファイルには何もありません。パスを確認しましたが、パスは有効に見えます。
私のファイル構造は...
と呼ばれる新しい空の Web サイト
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
私が持っているカスタム変数.lessファイルで...
@iconSpritePath: "../../img/bootstrap/glyphicons-halflings.png";
@iconWhiteSpritePath: "../../img/bootstrap/glyphicons-halflings-white.png";
保存時に作成された variables.css 出力が空です
私が持っているカスタムoverrides.lessファイルで...
@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}");
}
保存時に、Web Essentials は以下の overrides.css を作成します...
[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");
}
core フォルダー内の最後のカスタム less ファイルは、core.less ファイルです。このファイルには次のインポートしかありません...
@import "../bootstrap/bootstrap.less";
@import "overrides.less";
保存すると、空の css ファイルが作成されます。再び、空。
私が欠けているものはありますか?指示を何度か確認しましたが、すべてが正しいようです。
ありがとう