Namespace Bootstrap4 CSS and JS Components

Question

Is there any way available as part of Bootstrap4 scss based build to add prefix to each bootstrap class in css and js to avoid name collisions.

I have used https://github.com/faucamp/bootstrap_namespace_prefixer

But this only supports bootstrap3 based css and js files.

Answer 1

Assuming you make use of SCSS you can prefix the whole BS4 library like:

.myprefix {
  @import '~bootstrap.scss';
}

Prefixing the javascript is a little harder. I have not tried this but it looks like you can specify the CONST variables in each js file to match your prefix: https://github.com/twbs/bootstrap/blob/v4.5.0/js/src/button.js#L23-L25 After that create your own bootstrap index.js, define all variables there and import the classes you need. Or, create a plugin in your (webpack?) buildscript to dynamically replace all classes on build.