Question

我正在使用visual studio 2012 with web essentials 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";

保存时创建的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文件。此文件仅具有以下导入...

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

保存时会创建一个空的css文件。再次，空。

有什么东西我不见了。我已经完成了几次指示，一切似乎都正确。

由于

Answer 1

您不仅应该保存Less文件，还应该使用Less编译器来编译它们。

请参阅http://vswebessentials.com/features/less如何使用Web Essentials编译Less文件。

您可以从工具设置所有编译器设置 - ＆gt;选项。它们包括：

保存时编译
在构建时编译
启用缩小

无法编译Imports

1 个答案: