无法获得 LESS 来编译 Imports答案

【问题标题】：Can't get LESS to compile Imports无法获得 LESS 来编译 Imports
【发布时间】：2013-07-21 19:08:45
【问题描述】：

我正在使用 Visual Studio 2012 和 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 输出为 empty

在我的自定义 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 文件。再次，为空。

我有什么遗漏的吗？我已经检查了几次说明，一切似乎都正确。

谢谢

【问题讨论】：

你用什么命令编译？

标签： asp.net twitter-bootstrap less web-essentials

【解决方案1】：

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

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

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

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

【讨论】：