更新scss引导程序

编程问答 2022-06-04

问题描述

我正在使用新的Bootstrap npm启动器 我需要用新颜色更新变量，但我不知道该怎么做

这是starter.scss 

// Override Bootstrap's Sass default variables
//
// Nearly all variables in Bootstrap are written with the `!default` flag.
// This allows you to override the default values of those variables before
// you import Bootstrap's source Sass files.
//
// Overriding the default variable values is the best way to customize your
// CSS without writing _new_ styles. For example,change you can either change
// `$body-color` or write more CSS that override's Bootstrap's CSS like so:
// `body { color: red; }`.


//
// Override Bootstrap here
//

// Toggle global options
$enable-gradients: true;
$enable-shadows: true;

// Customize some defaults
$body-color: purple;
$turquoise: #1abc9c;
$body-bg: #f5f5f5;
$border-radius: .4rem;


//
// Bring in Bootstrap
//

// Option 1
//
// Import all of Bootstrap's CSS

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

// Option 2
//
// Import just the styles you need. Note that some stylesheets are required no matter what.

@import "bootstrap/scss/functions"; // required
@import "bootstrap/scss/variables"; // required
@import "bootstrap/scss/mixins"; // required
// @import "bootstrap/scss/root";
@import "bootstrap/scss/reboot"; // required
@import "bootstrap/scss/type";
// @import "bootstrap/scss/images";
// @import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
// @import "bootstrap/scss/tables";
// @import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
// @import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/button-group";
// @import "bootstrap/scss/input-group"; // Requires forms
// @import "bootstrap/scss/custom-forms";
// @import "bootstrap/scss/nav";
// @import "bootstrap/scss/navbar"; // Requires nav
// @import "bootstrap/scss/card";
// @import "bootstrap/scss/breadcrumb";
// @import "bootstrap/scss/pagination";
// @import "bootstrap/scss/badge";
// @import "bootstrap/scss/jumbotron";
// @import "bootstrap/scss/alert";
// @import "bootstrap/scss/progress";
// @import "bootstrap/scss/media";
// @import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
// @import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal"; // Requires transitions
// @import "bootstrap/scss/tooltip";
// @import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
// @import "bootstrap/scss/spinners";
@import "bootstrap/scss/utilities";
// @import "bootstrap/scss/print";

//
// Custom styles
// 

//custom color variables

$pumpkin:  '#d35400';
$fall: $pumpkin;
$colors: map-merge($colors,("pumpkin": $pumpkin));
$theme-colors: map-merge($theme-colors,("fall":  $fall)); 

// 
// Custom buttons
//
@each $color,$value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value,$value);
  }
}


body {
  background: $pumpkin;
  color: $turquoise;
  padding: 3rem;
}

// Style Bootstrap icons
.bi {
  fill: currentColor;
}

在此文件中，我更新了新的自定义颜色，主题颜色和

$pumpkin:  '#d35400';
$fall: $pumpkin;
$colors: map-merge($colors,$value);
  }
}

但是运行npm run css-compile后出现此错误：

enter image description here

我阅读并理解该错误与$color变量有关。

我正在从button-variant发布混合信息_button.scss 

 "message": "argument `$color` of `darken($color,$amount)` must be a color"

@mixin button-variant(
  $background,$border,$color: color-contrast($background),$hover-background: if($color == $color-contrast-light,darken($background,7.5%),lighten($background,7.5%)),$hover-border: if($color == $color-contrast-light,darken($border,10%),lighten($border,5%)),$hover-color: color-contrast($hover-background),$active-background: if($color == $color-contrast-light,10%)),$active-border: if($color == $color-contrast-light,12.5%),$active-color: color-contrast($active-background),$disabled-background: $background,$disabled-border: $border,$disabled-color: color-contrast($disabled-background)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include Box-shadow($btn-Box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,&:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include Box-shadow($btn-Box-shadow,0 0 0 $btn-focus-width rgba(mix($color,15%),.5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      Box-shadow: 0 0 0 $btn-focus-width rgba(mix($color,.5);
    }
  }

  .btn-check:checked + &,.btn-check:active + &,&:active,&.active,.show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients,none,null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include Box-shadow($btn-active-Box-shadow,.5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        Box-shadow: 0 0 0 $btn-focus-width rgba(mix($color,.5);
      }
    }
  }

  &:disabled,&.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients,null);
    border-color: $disabled-border;
  }
}

您知道如何使用自定义变量覆盖吗？

预先感谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

sasasssassscss-mixinstwitter-bootstrap