How to Override Node Bootstrap styles in Rails 5.1?

Viewed 794

When using the "new" Rails 5.1 Paradigm of Yarn & Webpack: If I include bootstrap using Yarn (NOT using a gem) as follows:

yarn add jquery
yarn add bootstrap

Then with application.js of:

*= require bootstrap/dist/css/bootstrap

Everything seems to be working great... Except overriding a bootstrap style.

What is the proper way now to override a style that is provided by bootstrap (e.g. a body style that comes from /bootstrap/less/scaffolding.less)

Anything put in a .css file in /app/assets/stylesheets such as before_bootstrap.css:

body {
  background-color: #333;
}

gets overridden by the style in scaffolding.less, regardless of whether you require that css file before or after the application.css line:

  *= require_tree .
  *= require_self
  *= require before_bootstrap
  *= require bootstrap/dist/css/bootstrap
  *= require after_bootstrap

The old way, I suppose, would have been to use a bootstrap_and_overrides.css file and @import ??? but I don't see how that works with the node/webpack paradigm.

1 Answers
Related