Less @import（参考）不起作用

Question

我最近在 visual studio 2013 和 MVC5 中使用 Less 框架；我已尝试实现按引用导入功能，详见 here:

我在引用 bootstrap 的 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;
}

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

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

Answer 1

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

reference styles will not show up in your generated CSS unless the reference styles are used as mixins or extended.

要删除不必要的样式，请更具体：

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

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

Less @import（参考）不起作用

Less @import (reference) not working

css

asp.net-mvc

less

twitter-bootstrap

visual-studio-2012