Visual Studio 2015和Gulp：获取所有子目录中的所有文件

Question

我遇到的问题是Gulp没有获取/引用它需要的所有文件并且错误。这适用于不再与我们在一起的前任开发者。 gulp方法错误地看似是参考错误。它似乎无法“看到”Assets文件夹中的任何子目录。

这是错误：

[08:47:38] Using gulpfile C:\Development...\Gulpfile.js
[08:47:38] Starting 'icons'...
[08:47:38] Finished 'icons' after 48 ms
[08:47:38] Starting 'sass'...
events.js:160
  throw er; // Unhandled 'error' event
  ^
Error: Assets\sass\styles.scss
Error: File to import not found or unreadable: bootstrap
   Parent style sheet: C:/Development/***... on line 5 of     Assets/sass/styles.scss
>> @import 'bootstrap';

这是我的相关gulp脚本：

gulp.task('sass', ['icons'], function() {
return gulp.src('./Assets/sass/styles.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
        includePaths: [
        'bower_components/bootstrap/scss',
        'bower_components/font-awesome/scss',
        'bower_components/bootstrap4-chosen'
        ]
    }))
    .pipe(concat('styles.css'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./wwwroot/css'))
    .pipe(browserSyncStream());
});

styles.scss：

// Base vendors and variables
@import 'font-awesome';
@import 'variables';
@import 'bootstrap';

// Mixins, utilities and base styles
@import 'mixins';
@import 'utilities';
@import 'base';

这是文件夹结构：

将styles.scss中的@import更改为：

@import '../../bower_components/bootstrap/dist/css/bootstrap.css';

给我一​​个不同的错误：

> Error: Undefined variable: "$font-size-lg".
    on line 38 of Assets/sass/_layout.scss
>>      font-size: $font-size-lg;

似乎这里缺少更多参考文献......我认为gulp脚本不是通过递归搜索所有子文件夹来获取所有文件......我如何巧妙地做到这一点？或者还有其他什么遗失？

Answer 1

您的sass任务没有任何问题。试了一下。的工作原理。

我的猜测是你的同事正在使用即将发布的bootstrap 4.0.0的开发版本，但你已经安装了bootstrap 3.x.当前bootstrap 3.3.6没有scss文件夹，因为它仍然使用less。如果您只是bower install bootstrap，则获得3.3.6。

确保bower.json：

中包含以下内容：

"dependencies": {
  "bootstrap": "4.0.0-alpha.2"
}

或使用以下方法直接安装bootstrap 4.0.0：

bower install bootstrap#4.0.0-alpha.2