Jquery 使用 gulp 设置 Bootstrap SASS 时出现问题

Question

我正在尝试设置一个项目，该项目将使用 Twitter bootstrap.

编译我的 sass 文件

我的项目是这样的：

我的 gulp 文件如下所示：

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var bootstrap = require('bootstrap-sass');
var jquery = require('jquery');

// config
var config = {
    sassInput: 'sass',
    sassOutput: 'public/css'
}

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src(config.sassInput + 'scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest(config.sassOutput));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['sass', 'watch']);

当我尝试运行 "gulp" 时出现此错误

Error: Bootstrap's JavaScript requires jQuery
    at Object.<anonymous> (G:\Project\node_modules\bootstrap-sass\assets\javascripts\bootstrap.js:8:9)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (G:\Project\gulpfile.js:7:17)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)

如何从 bootstrap 提供对 jQuery 的引用？这是我第一次使用 gulp，我不确定我应该做什么。

谢谢。

Answer 1

这里主要有两种方法：

首先是通过页面中的纯 css 标签导入加载 bootstrap。然后载入编译后的 sass 文件。但我可以想象那不是你想要的。
其次是通过包含路径或加载路径在 bootstrap 路径中加载。示例：

example 1
    .pipe(sass({
        includePaths: [
            require("node-bourbon").includePaths,
            require("node-neat").includePaths[1],
            require("node-normalize-scss").includePaths,
            config.path.bower + config.path.fontAwesome
        ],
        importer: jsonImporter,
        outputStyle: config.sass.style
    }))

example 2
    .pipe(sass({
        style: 'compressed',
        loadPath: [
            './resources/sass',
            config.bowerDir + '/bootstrap-sass-official/assets/stylesheets',
            config.bowerDir + '/fontawesome/scss',
        ]
    })

你的 jquery 错误只是因为你需要整个 bootstrap npm 包。在顶部。我想那不是你想要的。

Jquery 使用 gulp 设置 Bootstrap SASS 时出现问题

Jquery issue setting up Bootstrap SASS with gulp

twitter-bootstrap

bootstrap-sass

gulp

gulp-sass