How can I override Bootstrap Node styles in Rails 5.1?
When using the "new" Rails 5.1 Paradigm of Yarn and Webpack: if I enable loading using yarn (NOT using gem) like this:
yarn add jquery
yarn add bootstrap
Then with application.js
of:
*= require bootstrap/dist/css/bootstrap
Everything seems to work fine ... Except for overriding the bootstrap style.
How can you now override the bootstrap-provided style (like the body style that comes from /bootstrap/less/scaffolding.less
)
Anything placed in a .css file in / app / assets / stylesheets , for example before_bootstrap.css
:
body {
background-color: #333;
}
gets the overridden styling in scaffolding.less whether or not css file before or after line application.css
:
*= require_tree .
*= require_self
*= require before_bootstrap
*= require bootstrap/dist/css/bootstrap
*= require after_bootstrap
The old way I suppose would be to use file bootstrap_and_overrides.css
and @import ??? but I can't see how this works with the node / webpack paradigm.
source to share
Ok, it works for me, here's what I did:
- Added my sass files (variables, bootswatch file and some globals) to root folder
/app/javascripts
- Created a package folder
packs/app
as a base project package
in this package folder:
- Created
index.js
where are my import statements - Created
styles.scss
where sass import statement
My .scss styles start with:
@import "../../variables.scss";
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "../../bootswatch.scss";
@import "../../utils.scss";
which works great, loads the base bootstrap and then bootswatch and variables.
As the project progresses, I'll create new folders of folders as needed for specific functionality, although this is a fairly clean "rails" application so we'll see how it grows.
source to share