I've started using Gulp for the first time today and I've been playing around changing some of the variables in the _variables.scss files to modify the theme. I added a grey to the grayscale in the colour system and when I came to compile this out to css with gulp I got an error:
Error: node_modules\bootstrap\scss_variables.scss Error: Undefined variable: "$grey-950". on line 135 of node_modules/bootstrap/scss/_variables.scss $body-bg: $grey-950 !default;
----------------------------^
My understanding of the _variables.scss file and the greyscale was that I could just slip an extra one in provided I mapped it out like so:
// stylelint-disable
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$gray-950: #222222 !default;
$black: #000 !default;
$grays: () !default;
$grays: map-merge((
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900,
"950": $gray-950
), $grays);
Then I should be able to use it for the page background:
// Body
//
// Settings for the `<body>` element.
$body-bg: $grey-950 !default;
$body-color: $gray-900 !default;
Is there a step I might be missing?
your $body-bg variable is grey-950 !default;
shouldn't it be gray-950 !default?