gpt4 book ai didi

css - LESS Bootstrap 作为引用包括内容

转载 作者:行者123 更新时间:2023-11-28 17:25:46 25 4
gpt4 key购买 nike

我试图在我的 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 文件?

最佳答案

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

when a class in a referenced import calls a mixin from a not referenced import, the output of this mixin will be (unexpected) shown in your css. So in the answer above not using reference for mixins.less will indeed give a lot of unwanted classes

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

关于css - LESS Bootstrap 作为引用包括内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27285608/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com