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

问题描述

我正在尝试将所有CSS文件都移到SCSS文件中，以便可以使用Bootstrap 4.5主题化网站样式。我以前有一些方法可以使用，但是一旦我将CSS切换到SCSS并尝试使用自定义$ theme-color和$ color映射变量，就出了问题。

我正在使用Bootstrap 4.5.0，gulp 4.0.2，gulp-sass 4.1.0，节点14.4.0，express 4.17.1和npm 6.14.5。

我尝试在bootstrap.scss中移动导入内容，以使变量位于第一，第二，第三和最后一个位置。当我尝试在$secondary中使用类似custom.scss的东西时，它们似乎都不起作用。如果我创建一个<button class="btn btn-secondary">My Button</button>，它应该是橙色的。但是，当我尝试执行footer a:hover { color: $secondary }时，会使用Bootstrap的默认辅助（灰色）。

我是滥用变量，误导入文件还是完全不同的东西？

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,"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; }

编辑 我忘了包括我的大任务

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

然后将它们导入到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已包含引导程序。

,

我发现了我的问题。我从bootstrap.js中删除了head.ejs导入，而不是

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

我需要做

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