2013-07-21 54 views
1

我正在使用web essentials 2012最新版本的visual studio 2012。 我正在關注這篇文章http://www.cutterscrossing.com/index.cfm/2013/5/20/Skinning-Bootstrap-Tabs的方向。 我有更少的文件中@import指令,當我保存文件時創建一個css文件。但是,在css文件中沒有任何內容。 我檢查了路徑,但路徑顯示有效。無法編譯進口

我的文件結構是...

新的空網站叫

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 

在自定義variables.less文件我有...

@iconSpritePath:   "../../img/bootstrap/glyphicons-halflings.png"; 
@iconWhiteSpritePath:  "../../img/bootstrap/glyphicons-halflings-white.png"; 

的變量。保存時創建的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}"); 
    } 

在保存網頁要領創建具有以下內容的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文件。 此文件只具有以下進口...

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

保存時創建一個空的CSS文件。再次,空着。

有什麼我失蹤了。我已經過了幾次指示,一切似乎都正確。

感謝

+1

你用什麼命令編譯? –

回答

0

你不應該只保存較少的文件,但編譯它們利用一個都不能少編譯器。

請參閱http://vswebessentials.com/features/less如何使用Web Essentials編譯Less文件。

您可以從工具 - >選項中設置所有編譯器設置。它們包括:

  1. 編譯上節省構建
  2. 編譯啓用微小