如何将引导原色更改为线性渐变？答案

【问题标题】：How to change bootstrap primary color to linear-gradient?如何将引导原色更改为线性渐变？
【发布时间】：2018-11-02 14:05:59
【问题描述】：

我正在尝试将引导程序原色更改为 linear-gredient，但出现错误：

$theme-colors: (
  "primary": linear-gradient(to right, #373b44, #4286f4)
);

错误：

$link-hover-color:          darken($link-color, 15%) !default;
                           ^
      Argument `$color` of `darken($color, $amount)` must be a color

【问题讨论】：

什么是$link-color？好像不是什么颜色。我们可以有更多带有变量$link-color 的代码吗？
$theme-colors: ( "primary": linear-gradient(to right, #373b44, #4286f4) ); @import "node_modules/bootstrap/scss/bootstrap";实际上所有的代码就是这样。没有其他代码。如果我把单一的十六进制颜色它的作品
抱歉，我看不到 $link-color 的定义位置：/
我只收到线性梯度的错误。单一的十六进制颜色作品。我认为 $link-color 是引导程序中的助手
如果我是正确的 $theme-colors 输出 ::root { } CSS 变量结构，那些变量（如 --primary 不能接受 CSS 声明（如线性渐变）；只有值（如单位测量或 HEX值），因为它们是通过 var(--variableName) 应用的

标签： css twitter-bootstrap sass bootstrap-4 background-color

【解决方案1】：

你想达到什么目的？渐变背景？ $primary-color 主要用于设置color 样式规则，而不是背景。它还用于根据它计算其他颜色，例如$link-color。在您的情况下，sass 解析器试图使链接在悬停时看起来更暗，试图将变暗函数应用于线性渐变。如果您尝试制作线性渐变背景 - 您需要设置处理背景图像的变量。对于渐变文本，您需要阅读 background-clip

Gradient Text

【讨论】：

【解决方案2】：

问题是linear-gradient 用于background-image，而不是前台color。当 SASS 编译器尝试构建 Bootstrap 时，它不能在背景图像上使用 darken(..) 函数。

相反，您可以为具有这样背景的元素更改 primary 颜色...

.bg-primary,
.btn-primary,
.badge-primary,
.alert-primary {
    background-image: linear-gradient(to right, #373b44, #4286f4);
}

https://www.codeply.com/go/XXUxFr6tEZ

【讨论】：

【解决方案3】：

步骤：

设置$enable-gradients: true
以渐变为背景覆盖 .bg-gradient-primary 类
将.bg-gradient-primary 类添加到您的元素中

示例：

<button class="btn bg-gradient-primary border-0">Connect Wallet</button>

【讨论】：