我正在尝试在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默认颜色吗?
提前感谢!
2条答案
按热度按时间vlju58qv1#
它的工作如预期,新的
colors
被添加。但是,没有办法看到新的颜色,直到你把他们添加到theme-colors
Map...https://www.codeply.com/go/davKMdkCld
此外,请确保在导入Bootstrap变量之前定义所有颜色变量...
https://www.codeply.com/go/davKMdkCld
ujv3wf0j2#
我发现了一个非常简单的解决方案来删除bootstrap中的所有默认颜色。
而不是像这样使用
"像这样使用"