无法在 Sass 中使用默认引导颜色答案

【问题标题】：Can't use default Bootstrap colors in Sass无法在 Sass 中使用默认引导颜色
【发布时间】：2020-08-17 00:46:44
【问题描述】：

我使用以下代码导入了引导 scss

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

我什至可以更改默认引导变量，例如：

$border-radius: 1rem;

但问题是我不能像这样在我自己的 css 选择器中使用引导颜色，为什么下面的代码不起作用？它不会改变颜色。

aside a {
  color: $success;
}

【问题讨论】：

对风格使用 !important。
你在哪里导入bootstrap？在 SCSS 的顶部？
@RayeesAC 绝对没有理由使用!important。那应该是最后的手段。使用更具体的选择器比使用!important 更好。此外，如果 OP 正在使用引导程序 - 他们为什么要使用 !important 来覆盖他们已经获得的内容？
投票关闭，因为这不是引导问题，而是设置为 !important 的另一条规则，该规则被覆盖。

【解决方案1】：

这样使用

@import "style/variables";
@import "node_modules/bootstrap/scss/bootstrap";

@import "style/my_other_SCSS

在变量.scss中

$border-radius: 1rem;

在 my_other_SCSS.scss 中

aside a {
  color: $success;
}

这会起作用。

【讨论】：

【解决方案2】：

问题在于 $success 没有设置为 SASS/SCSS 变量，而是 CSS var，例如 --success：

aside a {
  color: var(--success);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<aside>
<a href="#">link</a>
</aside>

【讨论】：

我试过这样。不起作用。仍然，颜色没有改变。我正在使用 npm 在本地导入 Bootstrap。
运行代码sn-p。它在这里工作，即使使用 npm 在本地导入引导程序也是一样的。 CDN 是您所拥有的 css 版本。
您可能需要在原始问题中添加更多信息，以了解将 Bootstrap 导入 SCSS 文件的位置。您是否有其他 CSS 覆盖 a 标签？
这正是主要问题。
另外我更改了值成功颜色。如果我将其编码为color: var(--success);，它将显示成功的更改值。但是如果我像color:$success 这样编码，它会显示默认的引导值。

【解决方案3】：

样式表中有另一个 !important 规则覆盖了链接颜色。

a {
    color : white !important
}

【讨论】：