1

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 ファイルが作成されます。再び、空。

私が欠けているものはありますか?指示を何度か確認しましたが、すべてが正しいようです。

ありがとう

4

1 に答える 1