更少的@import（参考）不起作用

Question

我最近在 Visual Studio 2013 和 MVC5 中使用 Less 框架；我已尝试通过引用功能实现详细的here 导入：

我在一个引用引导程序的less文件的less文件中有以下代码：

@import (reference) "../bootstrap/bootstrap.less";

#content {
    > form {
        .form-horizontal;
    }
} 

根据文档，我希望适用于 .form-horizontal 的样式适用于我的 #content > form 选择器。但是，似乎 bootstrap.less 中的所有样式也被导入，因为输出的样式似乎与表单元素没有任何关系，例如：

.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

此外，即使我从样式中删除了所有引导类引用，这些样式也会包含在输出中。

这是正确的还是我错误地导入了引导引用？

Answer 1

这是因为在 Bootstrap 中广泛使用的:extend()。如http://lesscss.org/features/#import-options-reference中所述：

reference 样式不会出现在您生成的 CSS 中，除非参考样式用作 mixins 或扩展。

更具体地去除不必要的样式：

@import "../bootstrap/variables.less";
@import "../bootstrap/mixins.less";
@import (reference) "../bootstrap/forms.less";

#content {
  > form {
    .form-horizontal;
  }
}