Gulp 使用 includePaths 载入外部 Sass资源 DAY95

若我们要使用外部套件载入的 Sass
那要怎麽载入呢??

这里我们以 Bootstrap为例子
先使用 npm 的方式来载入
首先我们先砍掉 bower 载入的 Bootstrap

bower uninstall bootstrap --save

再以 npm 方式载入 Bootstrap

npm install bootstrap --save

这里可能会出错
但不会影响次次要介绍的内容
明天将介绍如何解决此错误

并把 source 资料夹改名为 stylesheets
当然 watch 与 sass 都必须改动它的 gulp.src来源

gulp.task('sass', function () {
    // 更改地方
    return gulp.src('./source/stylesheets/**/*.scss')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass({
        outputStyle: 'nested',
    }).on('error', $.sass.logError))
    .pipe($.postcss([autoprefixer()]))
    .pipe($.if(option.env === 'production',$.cleanCss()))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('./public/stylesheet'))
    .pipe(browserSync.stream())
});

gulp.task('watch', function () {
    // 更改地方
    gulp.watch('./source/stylesheets/**/*.scss', ['sass']);
    gulp.watch('./source/**/*.jade', ['jade']);
    gulp.watch('./source/js/**/*.js', ['babel']);
});

更改完後 index.jade当然也要更改

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
        // 更改地方
        link(rel="stylesheet", href="stylesheet/all.css")
        script(src="js/all.js")
    body

接下来我们就必须增加 includePaths

gulp.task('sass', function () {
    return gulp.src('./source/stylesheets/**/*.scss')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass({
        outputStyle: 'nested',
        includePaths: ['./node_modules/bootstrap/scss']
    }).on('error', $.sass.logError))
    .pipe($.postcss([autoprefixer()]))
    .pipe($.if(option.env === 'production',$.cleanCss()))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('./public/stylesheet'))
    .pipe(browserSync.stream())
});

接着
我们在all.scss 输入