Question

我正在尝试在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文件？

Answer 1

请参阅：https://stackoverflow.com/a/20023205/1596547

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

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

LESS Bootstrap作为参考包括内容

1 个答案: