logo标签列表

Bootstrap和LESS：清洁的“引用”导入

less
6

我阅读了 @import (reference) 并尝试导入bootstrap而不添加css块。

我认为如果我的LESS文件只有一行，那么导出的css文件将是空的:

@import (reference) "bootstrap";

但是export.css文件有些行：
d.thumbnail > img, ...
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.btn-group-lg > .btn {...}
.btn-group-sm > .btn {...}
.btn-group-xs > .btn {...}
.container:before, ...
.modal-footer:after {
  content: " ";
  display: table;
}
.container:after, ...
.modal-footer:after {
  clear: both;
}

那么为什么？它们是否有特定的用途？

我正在使用 Less 1.7.0 和 Bootstrap 3.1.1。

3
这是一个已知问题，“参考”实现对于某些嵌套/自我引用模式存在问题。您可以通过导入编译后的引导CSS和单独的混合组件（如果需要）来获得更清晰的结果，例如：@import (less, reference) ".../bootstrap.css"; @import ".../mixins.less";等。 - seven-phases-max
1
@xeepete 对于上面的例子，可以参考#1851（还可以查看引用它的问题以获取具体示例）。但是还有更多。 - seven-phases-max
1
@seven-phases-max 请在答案中添加您的评论，以便它可以被接受。 - Bass Jobsen
@seven-phases-max 最近有什么进展吗？ - salmatron
1
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - seven-phases-max
显示剩余2条评论
1个回答
0
这是因为文件Bootstrap中有:extend。您可以使用以下方法（v.3.x.x）：
// Core variables and mixins
@import "bootstrap/variables.less";
@import (reference) "bootstrap/mixins.less";

// Reset and dependencies
// @import "bootstrap/normalize.less";
// @import (reference) "bootstrap/print.less";
// @import (reference) "bootstrap/glyphicons.less";

// Core CSS
@import (reference) "bootstrap/scaffolding.less";
// @import (reference) "bootstrap/type.less";
@import (reference) "bootstrap/code.less";
// @import (reference) "bootstrap/grid.less";
@import (reference) "bootstrap/tables.less";
// @import (reference) "bootstrap/forms.less";
@import (reference) "bootstrap/buttons.less";

// Components
@import (reference) "bootstrap/component-animations.less";
@import (reference) "bootstrap/dropdowns.less";
// @import (reference) "bootstrap/button-groups.less";
// @import (reference) "bootstrap/input-groups.less";
// @import (reference) "bootstrap/navs.less";
// @import (reference) "bootstrap/navbar.less";
@import (reference) "bootstrap/breadcrumbs.less";
@import (reference) "bootstrap/pagination.less";
// @import (reference) "bootstrap/pager.less";
@import (reference) "bootstrap/labels.less";
@import (reference) "bootstrap/badges.less";
@import (reference) "bootstrap/jumbotron.less";
// @import (reference) "bootstrap/thumbnails.less";
@import (reference) "bootstrap/alerts.less";
@import (reference) "bootstrap/progress-bars.less";
@import (reference) "bootstrap/media.less";
@import (reference) "bootstrap/list-group.less";
// @import (reference) "bootstrap/panels.less";
@import (reference) "bootstrap/responsive-embed.less";
@import (reference) "bootstrap/wells.less";
@import (reference) "bootstrap/close.less";

// Components w/ JavaScript
// @import (reference) "bootstrap/modals.less";
@import (reference) "bootstrap/tooltip.less";
@import (reference) "bootstrap/popovers.less";
// @import (reference) "bootstrap/carousel.less";

// Utility classes
@import (reference) "bootstrap/utilities.less";
@import (reference) "bootstrap/responsive-utilities.less";

但这太荒谬了 :(

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接