Question

我所做的是从Bootstrap 4 docs下载bootstrap 4目录之后我在我的项目中实现了它，我有一个样式.scss，如下所示：

//fontawesome
@import "components/font-awesome";

// Core variables and mixins
@import "../components/bootstrap/scss/variables";
@import "../components/bootstrap/scss/mixins";
@import "mixins/mixins";

// Reset
// @import "../components/bootstrap/scss/normalize";
@import "../components/bootstrap/scss/print";

// Core CSS
@import "components/scaffolding";
@import "../components/bootstrap/scss/type";
@import "../components/bootstrap/scss/code";
@import "../components/bootstrap/scss/grid";
@import "../components/bootstrap/scss/tables";
@import "../components/bootstrap/scss/forms";
@import "components/buttons";

//Example how to override bootstrap styling
// @import "components/buttons";

// Components
// @import "../components/bootstrap/scss/component-animations";
@import "../components/bootstrap/scss/card";
// @import "../components/bootstrap/scss/glyphicons";
@import "../components/bootstrap/scss/dropdown";
@import "../components/bootstrap/scss/button-group";
@import "../components/bootstrap/scss/input-group";
@import "../components/bootstrap/scss/nav";
@import "../components/bootstrap/scss/navbar";
@import "../components/bootstrap/scss/breadcrumb";
@import "../components/bootstrap/scss/pagination";
// @import "../components/bootstrap/scss/pager";
// @import "../components/bootstrap/scss/labels";
@import "../components/bootstrap/scss/badge";
@import "../components/bootstrap/scss/jumbotron";
// @import "../components/bootstrap/scss/thumbnails";
@import "../components/bootstrap/scss/alert";
@import "../components/bootstrap/scss/progress";
@import "../components/bootstrap/scss/media";
@import "../components/bootstrap/scss/list-group";
// @import "../components/bootstrap/scss/panels";
// @import "../components/bootstrap/scss/wells";
@import "../components/bootstrap/scss/close";


@import "../components/bootstrap/scss/custom-forms";
@import "../components/bootstrap/scss/functions";
@import "../components/bootstrap/scss/images";
@import "../components/bootstrap/scss/reboot";

// Components w/ JavaScript
// @import "../components/bootstrap/scss/modals";
@import "../components/bootstrap/scss/tooltip";
@import "../components/bootstrap/scss/popover";
@import "../components/bootstrap/scss/carousel";
@import "../components/bootstrap/scss/transitions";

// Utility classes
@import "../components/bootstrap/scss/utilities";
// @import "../components/bootstrap/scss/responsive-embed";
// @import "../components/bootstrap/scss/responsive-utilities";

// Shame CSS/../components/bootstrap overruling
// @import "components/shame";
@import "components/fonts";

//custom styling
@import "components/test";
@import "components/login";

我将它编译成带有gulp的styles.css，如下所示：

/// Import node modules
///////////////////////

/// This one is needed for functionality on nodejs =< 0.10:
require('es6-promise').polyfill();

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    cache = require('gulp-cached'),
    inherit = require('gulp-sass-inheritance'),
    debug = require('gulp-debug'),

    sass = require('gulp-sass'),
    csso = require('gulp-csso'),
    prefix = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    base64 = require('gulp-base64'),
    imagemin = require('gulp-imagemin'),

    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');


/// Variables (files and folders)
/////////////////////////////////

var src = 'public/app/Resources/',
    dest = 'public/web/';

var scss = {
    dir: src + 'scss/',
    all: src + 'scss/**/*.scss',
    files: [
        src + 'scss/*.scss',
        src + 'scss/components/*.scss'
    ],
    dest: dest + 'css/'
};

var js = {
    all: src + 'js/components/*.js',
    files: [
        src + 'components/jquery/dist/jquery.min.js',
        'node_modules/popper.js/dist/umd/popper.min.js',
        src + 'components/bootstrap/dist/js/bootstrap.min.js',
        src + 'js/components/globals.js',
        src + 'js/components/!(init)*.js',
        src + 'js/components/init.js'
    ],
    dest: dest + 'js/'
};

var browserlist = ['> 4%', 'last 3 versions', 'Firefox ESR'];


/// Tasks
/////////

gulp.task('cache:clear', function() {
    // console.info(cache.caches);
    cache.caches = {};
});

gulp.task('sass', function() {
    return gulp.src(scss.files)
            // .pipe(cache('sass'))
            // .pipe(inherit({ dir: scss.dir  }))
            // .pipe(sourcemaps.init())
            .pipe(debug({ title: 'Processing: '}))
            .pipe(sass({
                outputStyle: 'compact'
            }).on('error', sass.logError))
            .pipe(base64({
                extensions: ['svg'],
                debug: false
            }))
            .pipe(prefix({
                browsers: browserlist
            }))
            .pipe(sourcemaps.write())
            .pipe(gulp.dest(scss.dest));
});

gulp.task('sass:build', function() {
    return gulp.src(scss.files)
            .pipe(sass().on('error', sass.logError))
            .pipe(base64({
                extensions: ['svg']
            }).on('error', function(err) { console.log(err); }))
            .pipe(prefix({
                browsers: browserlist
            }))
            .pipe(csso())
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(gulp.dest(scss.dest));
});

gulp.task('js', function() {
    return gulp.src(js.files)
            .pipe(concat('app.js'))
            .pipe(gulp.dest(js.dest));
});

gulp.task('js:build', function() {
    return gulp.src(js.files)
            .pipe(concat('app.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest(js.dest));
});

/**
 * @Task Image
 * Run task img
 *
 * Just pipe all images from project folder to public assets folder
 */
gulp.task('img', function () {
    return gulp.src(src + 'img/*.*')
        .pipe(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        }))
        .pipe(gulp.dest(dest + 'img/'));
});

/**
 * @Task Fonts
 * Run task font
 *
 * Just pipe all fonts from project folder to public assets folder
 */
gulp.task('font', function () {
    return gulp.src([
        src + 'fonts/*.*',
        src + 'components/fontawesome/fonts/*.*'
    ])
        .pipe(gulp.dest(dest + 'fonts/'));
});

gulp.task('develop', [
    'cache:clear',
    'sass',
    'js'
]);

gulp.task('build', [
    'cache:clear',
    'sass:build',
    'js:build'
]);

gulp.task('watch', ['default']);

gulp.task('default', ['develop'], function() {
    gulp.watch(scss.all, ['sass']);
    gulp.watch(js.all, ['js']);
});


/**
 * @Task all
 * Run task all
 *
 * define executable tasks when running "gulp" command
 */
gulp.task('all', ['js', 'sass', 'img', 'font']);

但是当我在终端中运行gulp时，它会抛出以下错误：

public\app\Resources\components\bootstrap\scss\_variables.scss
  167:25  argument `$color` of `darken($color, $amount)` must be a color

这是项目文件夹结构

有人可以帮我解决这个问题吗？我真的迷路了，不知道在哪里看......

Answer 1

解决方案 - Angluar-Stack

确保将所有引导工具更新到最新版本：

/usr/local/gcc-4.9.4/bin/c++4.9 -c -std=c++98  -m32 -g -ggdb -O0 
-Wall -Wextra -Wno-sign-compare -Wcast-align -fdiagnostics-color=auto  
-ftemplate-depth=32 -march=native -fPIC -o xx.o xx.cpp

有关此问题的更多信息，请访问： https://github.com/twbs/bootstrap/issues/23331

使用gulp进行编译时，Bootstrap 4变量参数错误

1 个答案: