删除/取消设置 Bootstrap 4中的默认$颜色(map-remove)

shstlldc  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(156)

我正在尝试在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。
下面是我用gulp编译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默认颜色吗?
提前感谢!

vlju58qv

vlju58qv1#

它的工作如预期,新的colors被添加。但是,没有办法看到新的颜色,直到你把他们添加到theme-colorsMap...

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

https://www.codeply.com/go/davKMdkCld
此外,请确保在导入Bootstrap变量之前定义所有颜色变量...

$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

ujv3wf0j

ujv3wf0j2#

我发现了一个非常简单的解决方案来删除bootstrap中的所有默认颜色。
而不是像这样使用

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

"像这样使用"

$colors: ();

相关问题