How to override boostrap variables in sass?

sage
21

This is how I do it.

_variables-project.scss holds my project specific vars such as colors and stuff that is not directly related to Bootstrap.
_variables-bootstrap.scss holds the Bootstrap vars that I want to override.

You could of course skip the bootstrap specific file and just put everyting in variables-project (or whatever you want to call that file).

@import "variables-project";
@import "variables-bootstrap";

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss

[rest of scss-code]
1 Like
22

Thanks MWDelaney and Folbert. Will definitely give this a try :slight_smile:

23

According to documentation for bootstrap, we suppose to copy variables and other custom stuff into the bootstraps _custom.scss. But you are right, bower folder shouldn’t be touched

if you really need :slight_smile: you should be able to :steam_locomotive: override and decide about every file what will be injected to your main.scss from bootstrap

in your theme bower.json file:

   {
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap-sass": "3.3.6",
    "isotope": "^3.0.1"
  },
  "overrides": {
    "isotope": {
      "main": [
        "js/isotope.js",
        "js/layout-modes/masonry.js"
      ]
    },
    "bootstrap-sass": {  
      "main": [
        "./assets/stylesheets/bootstrap/_variables.scss",
        "./assets/stylesheets/bootstrap/_mixins.scss",
        "./assets/stylesheets/bootstrap/_normalize.scss",
        "./assets/stylesheets/bootstrap/_type.scss",
        "./assets/stylesheets/bootstrap/_navs.scss",
        "./assets/stylesheets/bootstrap/_navbar.scss",
        "./assets/stylesheets/bootstrap/_modals.scss",
        "./assets/stylesheets/bootstrap/_carousel.scss"
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/tab.js"
     ]
    }
  }
}

your main.scss file looks then smth like this:

@import "common/variables"; // write your custom variables here that bower injected files can read them

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss";
@import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_mixins.scss";
// endbower

// and add other files from bower.json to override
@import "common/global";
@import "common/type-custom";
@import "components/text-ribbon";
...
24

Sage already has a _variables.scss file with example Bootstrap overrides in it. Why are we not just using that?

25

You right, thats the correct way to go about it. Tried it and the new variable vaules seems to be working :slight_smile: