Удалить / снять значения $ default по умолчанию в Bootstrap 4 (map-remove)

Question

Я пытаюсь сбросить / удалить / удалить цвета по умолчанию в Bootstrap 4.3.1.Я прочитал документацию , применил то, что он говорит, но он не работает, или я плохо работаю: (

Я пробовал это:

$colors: map-remove($colors, "blue", "indigo", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan");

Это мой код:

// Import resources
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";

//
// Color system
//
$crimson:     #E6312E;
$ecstasy:     #F67524;
$sun:         #F8B418;
$turbo:       #FEE600;
$atlantis:    #99C931;
$apple:       #64AD34;
$green-haze:  #00944E;
$heavy-metal: #1C1D1B;
$denim:       #1782B8;

$colors: map-merge(
  (
    "crimson":     $crimson,
    "ecstasy":     $ecstasy,
    "sun":         $sun,
    "turbo":       $turbo,
    "atlantis":    $atlantis,
    "apple":       $apple,
    "green-haze":  $green-haze,
    "denim":       $denim,
    "heavy-metal": $heavy-metal
  ),
  $colors
);

$colors: map-remove($colors, "blue", "indigo", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan");

$primary:       $heavy-metal;
$success:       $apple;
$info:          $denim;
$warning:       $turbo;
$danger:        $crimson;

//
// Finally, import Bootstrap!
//
@import "node_modules/bootstrap/scss/bootstrap";

Я ожидаю, что у $ colors есть только мои пользовательские цвета, плюс белый, серый-600 и серый-800.

Вот как я компилируюSASS с глотком:

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var cache = require('gulp-cache');
var cleanCSS = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');
var notify = require('gulp-notify');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var del = require('del');

var paths = {
    styles: {
        src: 'dev/src/scss/**/*.scss',
        dest: 'dist/css/',
        public: 'wp-content/themes/atipus/css/'
    }
};

sass.compiler = require('node-sass');

function clean() {
    return del([ 'assets' ]);
}

function styles() {
    return gulp.src(paths.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer('last 3 versions'))
        .pipe(cleanCSS())
        .pipe(rename({
            basename: 'main',
            suffix: '.min'
        }))
        .pipe(gulp.dest(paths.styles.dest))
        .pipe(gulp.dest(paths.styles.public));
}

function watch() {
    gulp.watch(paths.styles.src, styles);
}

var build = gulp.series(clean, gulp.parallel(styles));

exports.clean = clean;
exports.styles = styles;
exports.watch = watch;
exports.build = build;

exports.default = build;

Кто-нибудь знает, как удалить цвета Bootstrap по умолчанию?

Заранее спасибо!

Answer 1

Работает как положено, добавлены новые colors.Но увидеть новые цвета невозможно, пока вы не добавите их на карту theme-colors ...

$theme-colors: (
  "crimson": $crimson,
  "ecstasy": $ecstasy,
  "sun": $sun,
  "turbo": $turbo,
  ...
);

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

Кроме того, убедитесь, что вы определили все свои цветовые переменные до того, как вы импортируете загрузочные переменные ...

$crimson:     #E6312E;
$ecstasy:     #F67524;
$sun:         #F8B418;
$turbo:       #FEE600;
$atlantis:    #99C931;
$apple:       #64AD34;
$green-haze:  #00944E;
$heavy-metal: #1C1D1B;
$denim:       #1782B8;

$primary:   $heavy-metal;
$success:   $apple;
$info:      $denim;
$warning:   $turbo;
$danger:    $crimson;

@import "bootstrap/functions";
@import "bootstrap/variables";

$colors: map-merge(
  (
    "crimson":     $crimson,
    "ecstasy":     $ecstasy,
    "sun":         $sun,
    "turbo":       $turbo,
    "atlantis":    $atlantis,
    "apple":       $apple,
    "green-haze":  $green-haze,
    "denim":       $denim,
    "heavy-metal": $heavy-metal
  ),
  $colors
);
$colors: map-remove($colors, "blue", "indigo", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan");

$theme-colors: (
  "crimson": $crimson,
  "ecstasy": $ecstasy,
  "sun": $sun,
  "turbo": $turbo
);

@import "bootstrap";

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