How to overwrite Bootstrap 4.5 SASS variables and use them in SCSS files

Question

I am attempting to move all of my CSS files into SCSS files so I can use Bootstrap 4.5 theming to style my site. I previously had some of it working, but once I switched the CSS to SCSS and tried to use custom $theme-color and $color map variables, something is wrong.

I am using Bootstrap 4.5.0, gulp 4.0.2, gulp-sass 4.1.0, node 14.4.0, express 4.17.1, and npm 6.14.5.

I have tried moving my imports around in bootstrap.scss to have my variables first, second, third, last. None of them seem to work when I try to use something like $secondary in my custom.scss. If I create a <button class="btn btn-secondary">My Button</button>, it is orange like it is supposed to be. But, when I try to do footer a:hover { color: $secondary } it is used Bootstrap's default secondary (grey).

Am I misusing the variables, mis-importing a file, or something completely different?

variables.scss

$theme-colors: ( 
  "primary": #00A2E2, 
  "secondary":#f16c0e, 
  "danger": #cc0000, 
  "dark-blue": #370dff, 
  "light-blue": #8FD7FF, 
  "light-grey": #e7e7e7, 
  "grey": #666666, 
  "half-dk-blue": #1a0099, 
  "grey-cust": #a5a3a3);
$colors: (
  "light-grey": #e7e7e7,
  "secondary":#f16c0e,
  "dark-blue": #370dff,
  "light-blue": #8FD7FF
);
$font-family-base: "Open Sans",
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
$font-size-base: 14;
$card-bg: #f5f5f5;
$card-cap-colo: #e7e7e7;
$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 957px
);

bootstrap.scss

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "./variables.scss";

@import "../../node_modules/bootstrap/scss/bootstrap";

custom.scss

@import "./bootstrap.scss";

... a lot of styles in here, this is the easiest one to show what the problem is
footer a:hover {
  color: $secondary;
  text-decoration: none
}

custom.css

footer a:hover {
  color: #6c757d;
  text-decoration: none; }

EDIT I forgot to include my gulp task

gulpfile.js

const gulp = require("gulp");
var sass = require('gulp-sass');

var sassFiles = './public/sass/*.scss',
    cssDest = './public/stylesheets/';
gulp.task('styles', function(cb) {
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
    cb();
});

Then I import them in my head.ejs like so:

<link rel='stylesheet' type="text/css" href='/stylesheets/custom.css' >
<link rel='stylesheet' type="text/css" href='/stylesheets/bootstrap.css' >

Zim Zim · Accepted Answer · 2020-11-11T18:56:32

0

votes

Don't import bootstrap in head.ejs. Your custom.css already contains bootstrap.

How to overwrite Bootstrap 4.5 SASS variables and use them in SCSS files

2 Answers