Override bootstrap4 variables

sage
1

I’m trying to override bootstrap variables and it’s not working the way I thought:

I’m trying to change my global link color.

The bootrap sass looks like this:

$link-color:                              theme-color("primary") !default;
$link-decoration:                         none !default;
$link-hover-color:                        darken($link-color, 15%) !default;
$link-hover-decoration:                   underline !default;

My theme sass _variables.scss looks like this. I thought if I set the theme-color “primary” to my color it would affect all the links. I run yarn build and I don’t see the links change to #c00.

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$theme-colors: (
  "primary": #c00,
  "blue": #2392EC,
  "brand-primary": #c00
);
2

Hey @ericgauvin! Don’t import the Bootstrap variables file into your own variables file. Your variables need to load first, otherwise they won’t be able to override the !default variables Bootstrap provides.

Here’s a snippet from theresources/assets/styles/common/_variables.scss in my current project:

/** Import Bootstrap functions */
@import "~bootstrap/scss/functions";

$enable-rounded: false;
$enable-responsive-font-sizes: true;
$spacer: 1rem;

$theme-colors: (
  primary: #249dd4,
  primaryDark: #287ea7,
  primaryLight: #80d0f0,
  secondary: #ffde17,
  secondaryDark: #fec00f,
  "gray": #617991
);

$font-family-sans-serif: "Open Sans", Arial, sans-serif;
$font-weight-bolder: 800;
$headings-font-weight: 700;

$link-color: theme-color("primaryDark");

$navbar-dark-color: #fff;
$navbar-dark-hover-color: #000;
$navbar-nav-link-padding-x: $spacer;

$dropdown-padding-y: $spacer * 1.25;
$dropdown-bg: theme-color("primaryDark");
$dropdown-border-width: 0;
$dropdown-link-color: #fff;
$dropdown-link-hover-bg: theme-color("secondary");

// etc. ...
3

It looks like you’ve modified _variables.scss and added Bootstrap’s variables at the top. This might be causing your problem.

Sage by default supports the kind of override you’re doing but doesn’t include that line at the top:

4

Awesome! Works! Thanks!

1 Like
5

This topic was automatically closed after 42 days. New replies are no longer allowed.