引导4个变量参数误差与一饮而尽编译时

Question

我所做的是从网上下载的引导4目录：Bootstrap 4 docs 之后，我实现了它在我的项目，我有一个styles.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"; 

我编译这与一饮而尽一个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']); 

但是当我运行吞掉所有在它抛出我下面的错误终端：

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

下面是该项目的文件夹结构

可能有人请帮助我在此设置？我真的迷路了，不知道去哪里找了...

Answer 1

解决方案 - Angluar-Stack的

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

package.json 
(...) 

"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3", 
"bootstrap": "^4.0.0-beta", 
"bootstrap-loader": "2.2.0", 
"jquery": "^3.2.1", 
"popper.js": "^1.12.5", 
(...) 

---

有关问题

更多信息可以在这里找到： https://github.com/twbs/bootstrap/issues/23331