Bootstrap 4 如何覆盖Bootstrap 4.5 SASS变量并在SCSS文件中使用它们

我正在尝试将我所有的CSS文件移动到SCSS文件中，这样我就可以使用Bootstrap4.5主题来设计我的网站。我以前做过一些工作，但一旦我将CSS切换到SCSS并尝试使用自定义$theme color和$color map变量，就出现了一些问题

我正在使用Bootstrap 4.5.0、gulp 4.0.2、gulp sass 4.1.0、node 14.4.0、express 4.17.1和npm 6.14.5

我试着在

bootstrap.scss中移动我的导入，使变量处于第一、第二、第三和最后。当我试图在我的
custom.scss
中使用类似
$secondary
的东西时，它们似乎都不起作用。如果我创建了一个
我的按钮
，它会像预期的那样是橙色的。但是，当我尝试执行
footer a:hover{color:$secondary}
时，它使用引导程序的默认secondary（灰色）

我是否误用了变量、错误导入了文件或是完全不同的东西

变量。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
);

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

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


@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
}

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

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();
});

bootstrap.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
);

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

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


@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
}

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

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();
});

自定义.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
);

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

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


@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
}

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

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();
});

自定义.css

$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
);

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

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


@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
}

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

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();
});

编辑
我忘了包括我的吞咽任务

gulpfile.js

$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
);

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

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


@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
}

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

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();
});

然后我将它们导入我的
head.ejs
中，如下所示：

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


不要在
head.ejs
中导入引导。您的
custom.css
已经包含引导功能。
我解决了我的问题。我从我的
head.ejs
中删除了
bootstrap.js
导入，而不是

footer a:hover {
  color: $secondary;
  text-decoration: none
}

我需要这样做

footer a:hover {
  color: theme-color("secondary");
  text-decoration: none
}