LESS Bootstrap 作为参考包括内容答案

【问题标题】：LESS Bootstrap as reference includes contentLESS Bootstrap 作为参考包括内容
【发布时间】：2014-12-04 21:01:26
【问题描述】：

我正在尝试在我的 LESS 文件中引用 Bootstrap。

我在我的 NPM 项目中加入了 Bootstrap。如果我只是在我的 LESS 文件中做这样的事情：

@import (reference) 'node_modules/bootstrap/less/bootstrap';

这允许我引用 Bootstrap 变量。理论上，由于它是通过引用，我的 LESS 文件应该可以编译并且没有内容，因为它不应该包含任何 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.33;
  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;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table;
}
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}

如何在不将 60 行垃圾添加到我的 LESS 文件中的情况下引用 Bootstrap 文件？

【问题讨论】：

github.com/less/less.js/issues
这些基本上是非沉默的（我认为这是术语）混合。
需要这些类，尤其是 clearfix
@Christina 我没有看到你链接我的具体问题。如果存在，您介意指出具体问题吗。我知道它们是必要的，但它们已经在引导文件中了。当它们出现在我的文件中时，它们只是重复的 CSS。谢谢。
起初我以为你应该在那里创建一个问题，但这是 LESS 输出没有 () 或扩展的 mixin 的正常方式。

标签： css twitter-bootstrap less

【解决方案1】：

见：https://stackoverflow.com/a/20023205/1596547

当引用导入中的类从非引用中调用 mixin 引用导入，该 mixin 的输出将（意外）显示在你的 CSS 中。所以在上面的答案中没有使用参考 mixins.less 确实会提供很多不需要的类

AFAIK 唯一的解决方案是在 bootstrap.less 和 mixins.less 文件中的 @import 之前添加引用关键字。

【讨论】：

有趣。为什么它会这样工作没有意义，但至少我知道发生了什么。谢谢。
这不太正确。事实上，将(reference) 扔到mixin.less 将无济于事（首先因为(reference) 是可链接的，因此导入整个bootstrap 会自动将(reference) 投射到其所有嵌套导入中，其次上述问题不是确实在 mixins 中，但在 extend 中（无论这种情况发生在哪里，它都将扩展/扩展类标记为“引用”......嗯，这是一个很长的故事 - 在 less.js/issues 中有两三个相关的问题可能堆栈并在此处应用）。
有关更多信息，请参阅#1851、#1878 以及从那里引用/到那里的相关问题。
@seven-phases-max 谢谢。