使用gulp编译时引导4变量参数错误_Gulp_Bootstrap 4_Twitter Bootstrap 4_Gulp Sass

使用gulp编译时引导4变量参数错误

gulp bootstrap-4

使用gulp编译时引导4变量参数错误,gulp,bootstrap-4,twitter-bootstrap-4,gulp-sass,Gulp,Bootstrap 4,Twitter Bootstrap 4,Gulp Sass,我所做的是从以下位置下载bootstrap 4目录：之后，我在我的项目中实现了它，其中有一个styles.scss，如下所示： //fontawesome @import "components/font-awesome"; // Core variables and mixins @import "../components/bootstrap/scss/variables"; @import "../components/bootstrap/scss/mixins"; @import "

我所做的是从以下位置下载bootstrap 4目录：之后，我在我的项目中实现了它，其中有一个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";

/// 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将其编译成一个styles.css，如下所示：

//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";

/// 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']);

下面是项目文件夹结构

有人能帮我安装一下吗？我真的迷路了，不知道该去哪里找了…

解决方案-盎格鲁语栈

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

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",
(...)

有关此问题的更多信息，请参见：

解决方案-英语堆栈
确保将所有引导工具更新为其最新版本：

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", (...)

有关此问题的更多信息，请参见：
我也有同样的问题，GitHub上有一个完整的线程：我也有同样的问题，GitHub上有一个完整的线程：谢谢你的努力，但我只需要更改我的style.sccs中导入的顺序。首先必须导入函数感谢您的努力，但我只需要在my styles.sccs中更改导入顺序。首先必须导入函数