1

I'm trying to reference Bootstrap in my LESS file.

I'm including Bootstrap in my project with NPM. If I just do something like this in my LESS file:

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

That allows me to reference Bootstrap variables. In theory, since it's by reference, my LESS file should compile and have no content, since it's not supposed to include anything with LESS.

However, it includes this:

.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;
}

How can I reference the Bootstrap file without getting that 60 lines of garbage added to my LESS file?

samanime
  • 25,408
  • 15
  • 90
  • 139
  • https://github.com/less/less.js/issues – Christina Dec 04 '14 at 03:29
  • Those are, basically, non silent (I think that's the term) mixins. – Christina Dec 04 '14 at 03:42
  • Those classes are needed, especially the the clearfix – Christina Dec 04 '14 at 03:43
  • @Christina I don't see the particular issue in what you linked me. Do you mind pointing out the specific issue if it is there. I know they are necessary, but they'll be in the bootstrap file already. When they show up in my file, they just wind up being duplicate CSS. Thanks. – samanime Dec 04 '14 at 05:15
  • At first I thought you should create an issue there, but this is the normal way LESS outputs mixins without the () or are extended. – Christina Dec 04 '14 at 05:17
  • I understand they will be duplicated as you are using just a reference, but if you were to import bootstrap.less regularly these styles would not be duplicated they would appear where they're supposed to go. – Christina Dec 04 '14 at 05:19
  • So... if you need to just "reference Bootstrap variables" why do you import all those >70 BS files instead of just `variables.less`? – seven-phases-max Dec 04 '14 at 17:03

1 Answers1

1

see: 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

AFAIK the only solution is to add the reference keyword before the @import's in the bootstrap.less and mixins.less files.

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Interesting. Doesn't make sense why it'd work like that, but at least I know what's going on. Thanks. – samanime Dec 04 '14 at 15:38
  • 1
    That's not quite correct. In fact throwing `(reference)` at `mixin.less` won't help (first because `(reference)` is chainable so importing the whole `bootstrap` with it automatically casts `(reference)` to all of its nested imports, and second the problem above is not really in mixins but in `extend` (which marks extended/extending classes as "referenced" regardless of where this happens... Well, it's a long story - there're two or three related issues at less.js/issues that could stack and apply here). – seven-phases-max Dec 04 '14 at 16:59
  • 1
    For more info see [#1851](https://github.com/less/less.js/issues/1851), [#1878](https://github.com/less/less.js/issues/1878) and related issues referenced/ing from/to there. – seven-phases-max Dec 04 '14 at 18:01