Compiling Issue in Bootstrap 3 with Namespace

Compiling issue in Bootstrap 3 with namespace

Your Issue in Detail

As seven-phases-max described, there are issues with name spacing "when the & is appended to a nested selector." So the Bootstrap code in part has this:

.caret {
  .btn-default & {
    border-top-color: @btn-default-color;
  }
  .btn-primary &,
  .btn-success &,
  .btn-warning &,
  .btn-danger &,
  .btn-info & {
    border-top-color: #fff;
  }
}

Recall that every instance of & is replaced with the full nesting structure, so when you namespace it as you are, you effectively have this:

.namespace-bs {
  .caret {
    .btn-default & {
      border-top-color: @btn-default-color;
    }
    .btn-primary &,
    .btn-success &,
    .btn-warning &,
    .btn-danger &,
    .btn-info & {
      border-top-color: #fff;
    }
  }
}

And the full nested structure is .namespace .caret at the point of the & replacement, which is why you are seeing the selectors look like .btn-primary .namespace-bs .caret etc.

Work Around for LESS 1.4+

The following should work:

1. Compile bootstrap from its LESS code as normal into a bootstrap.css file. This will resolve all LESS into the "normal" bootstrap css code, and the & will function as expected and desired wherever it is used.

2. Then in your name spacing LESS file, do this:

.namespace-bs {
    @import (less) "css/bootstrap.css";
}

What we are doing is importing the compiled bootstrap.css file (which has no more & values in it, as it is fully compiled), but as we import it, we are telling LESS to treat the CSS as LESS code by putting the (less) type casting in. So now, your name space should simply append itself to the full selector string of each selector in the bootstrap.css file, and you should end up with what you desire.

How to namespace Twitter Bootstrap so styles don't conflict

This turned out to be easier than I thought. Both Less and Sass support namespacing (using the same syntax even). When you include bootstrap, you can do so within a selector to namespace it:

.bootstrap-styles {
  @import 'bootstrap';
}

Update: For newer versions of LESS, here's how to do it:

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

A similar question was answered here.

Add bootstrap JS/CSS in a subparty of a page or use a global no conflic or namespace?

So, I get it complettly working, and for the posterity:

• the CSS part is correctly handled by using LESS with a prefix and then, with an online LESS->CSS generator, get back the modified CSS. The detailled procedure is explained in css framework for an app with existing stylesheet

• for the JS part, I added the 11 "no-conflict" directives and nothing seems to break anymore, and so now I'm going to be able to add them one be one:

  <script type="text/javascript" src="/bootstrap-3.2.0-dist/js/bootstrap.js" />
  <script type="text/javascript">
  // <![CDATA[
  var bootstrapButton = $.fn.button.noConflict();
  var bootstrapAlert = $.fn.alert.noConflict();
  var bootstrapCarousel = $.fn.carousel.noConflict();
  var bootstrapCollapse = $.fn.collapse.noConflict();
  var bootstrapDropdown = $.fn.dropdown.noConflict();
  var bootstrapModal = $.fn.modal.noConflict();
  var bootstrapTooltip = $.fn.tooltip.noConflict();
  var bootstrapPopover = $.fn.popover.noConflict();
  var bootstrapScrollspy = $.fn.scrollspy.noConflict();
  var bootstrapTab = $.fn.tab.noConflict();
  var bootstrapAffix = $.fn.affix.noConflict();
  // ]]>
  </script>

Unable to compile Bootstrap css using grunt

Using the 'node js command line' instead of the regular command line did the trick for me.

Windoes: Start > Node.js command prompt

I followed the steps in this article and it finally worked.

---

Related Topics