Bootstrap＆LESS：乾淨的「參考」導入

我讀@import (reference)並試圖導入bootstrap而不添加css塊。Bootstrap＆LESS：乾淨的「參考」導入

我想，如果我的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。

來源

2014-04-17 gfaceless

這是已知的問題「參考」的實施具有一定的嵌套/自引用模式問題你。可以通過導入編譯的引導程序CSS和單個的mixin組件（如果需要）來實現更清晰的結果，例如：'@import（less，reference）「.../bootstrap.css」; @import「.../mixins.less 「;''等等 –

@ seven-phases-max謝謝，這確實有幫助。 – gfaceless

@ seven-phases-max是否有鏈接到導入引用問題？我想了解更多關於它的信息 – xeepete

這是因爲:extend裏面的文件Bootstrap。你可以使用這個（v.3.xx）：

// 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";

但是這是荒謬:(

來源

2015-11-26 15:25:55

Bootstrap＆LESS：乾淨的「參考」導入

回答

相關問題