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

【问题标题】：How to overwrite Bootstrap 4.5 SASS variables and use them in SCSS files如何覆盖 Bootstrap 4.5 SASS 变量并在 SCSS 文件中使用它们
【发布时间】：2020-11-11 16:20:53
【问题描述】：

我正在尝试将我的所有 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 中移动我的导入，以将我的变量放在第一位、第二位、第三位、最后一位。当我尝试在我的custom.scss 中使用$secondary 之类的东西时，它们似乎都不起作用。如果我创建一个<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,
  "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; }

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

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' >

【问题讨论】：

标签： bootstrap-4 sass gulp-sass

【解决方案1】：

不要在head.ejs 中导入引导程序。您的 custom.css 已经包含引导程序。

【讨论】：

【解决方案2】：

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

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

我需要做的

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

【讨论】：