Overriding Bootstrap Variables in Rails with Bootstrap-Sass Gem

Overriding Bootstrap variables in Rails with bootstrap-sass gem

You can override variables by simply redefining the variable before the @import directive.

For example:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

Override bootstrap variables in twitter-bootstrap-rails gem

Try removing this line:

@import "twitter/bootstrap/responsive";

I believe that the responsive media queries override the @gridColumnWidth when your viewport doesn't match the default.

Override Spree Commerce's Bootstrap Variables

It looks like I've solved the issue.

The Bootstrap Sass gem states:

Do not use //= require in Sass or your other stylesheets will not be
able to access the Bootstrap mixins or variables.

To get this working in Production / compiled assets. I had to:

1. Change all.css to all.scss
2. Change the //= require statements to @import

The vendor/assets/stylesheets/spree/frontend/all.scss:

// Sass Application Manifest

@import "frontend_bootstrap";

The vendor/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss:

// Spree Bootstrap Override

// Core
@import "bootstrap-sprockets";
@import "variables";
@import "bootstrap";

I hope this helps anyone who stumbled like I did.

How to Override Node Bootstrap styles in Rails 5.1?

Ok, I have this working, here's what I did:

1. Added my sass files (variables, the bootswatch file, and some globals) to the /app/javascripts root folder
2. Created an packs/app pack folder as my projects base pack

in that pack folder:

3. Created index.js where my import statements are
4. Created styles.scss where sass import statements are

My styles.scss starts 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 is working great, loads base bootstrap, followed by the bootswatch, and variables stick.

As the project progresses i'll make new pack folders if necessary for specific functionality, though this is a pretty pure "rails" app, so we'll see as it grows.

Rails 5 Bootstrap 4 how do I turn on bootstrap-variables

Figured it out. This is straight from the horse's mouth. You need to download the _bootstrap-variables.scss file from here and place it inside app/assets/stylesheets.

Uncomment the variables you want to use (e.g. $black, $white, etc.)

Then, application.scss should look like:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import "bootstrap-variables";

$body-bg: $black;
$body-color: $white;

@import "bootstrap";

Rails overriding bootstrap's css in an organised way

Since you're overriding the bootstrap setting I'm guessing that the CSS is compiling your change above where it's declared by bootstrap CSS. And since it's lower in the cascade it's being given priority. I would try to make it read like this:

.horizontal-form{ text-align:left !important; }

That should override any prior definitions of the class. Use it sparingly though as !important can cause some issues if overused.

Edit

Rearrange your asset pipeline as such:

*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "1st_load_framework";

The asset pipeline is loaded from top to bottom as well, so load your custom CSS after Bootstrap.

Bootstrap is overriding custom CSS in Ruby on Rails 4 website?

In css, rules that appear later in the same stylesheet or in a different stylesheet which loads later in the html will override similar ones already defined. For example

p { color: blue; }

p { color: red; }

will produce red text.

Your @import statements for bootstrap are referenced by the require_self line which appears after the require_tree . line. As a result, the bootstrap css will appear at the end of your compiled stylesheet and override any rules with the same selectors.

With sass, you are recommended not to use sprockets as you can't really control the source order but rather use @import for each of your sass partial files.

Reversing the two require lines might work well enough for you. Otherwise I would suggest you remove all the sprockets directives and comments above your @imports, move any code below into its own partial and explicitly @import each partial in the exact order you want.

---

Related Topics