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.