Sass-gulp 导入整个目录时出错答案

【问题标题】：Sass-gulp error importing whole directorySass-gulp 导入整个目录时出错
【发布时间】：2016-01-15 22:59:40
【问题描述】：

我首先要说我已经寻找了几个小时，但没有找到任何适合我的解决方案。我试图摆脱 Compass 并为我公司的网站切换到 Sass，但我遇到了 Sass 无法识别我的目录的问题；我收到“文件未找到或无法读取”错误。

我尝试使用 vanilla Sass、gulp-sass 和 gulp-ruby-sass 进行编译，但我得到了完全相同的错误。这是我的文件夹结构：

- css
- sass
  - variables
     - _colors.scss
     - _type.scss   (... etc.)
  - abstractions
  - base
  - components
- gulpfile.js

我的styles.scss 文件长这样（顶部有一堆cmets）：

@import "variables/**/*";
@import "abstractions/**/*";
@import "base/**/*";
@import "components/**/*";

我的 gulpfile.js 看起来像这样：

var    gulp = require('gulp'),
       sass = require('gulp-sass');

gulp.task('sass', function() {
  gulp.src('sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css/'));
});


gulp.task('default', ['sass'], function() {
  gulp.watch("sass/**/*.scss", ['sass']);
});

我得到的确切错误是：

error sass/lgfcu.styles.scss (Line 23: File to import not found or unreadable: variables/**/*.)

我尝试过将“includePaths”与 gulp-sass 一起使用，但没有运气。我也尝试过使用路径：./variables/**/*、variables/**/*.scss 等。

如果我包含特定文件的完整路径，它确实有效，但通配无效。任何帮助将不胜感激！

【问题讨论】：

可能重复：stackoverflow.com/questions/4778627/…
这是“gulp-sass”问题，因此它不是重复的

标签： css sass gulp-sass gulp-ruby-sass

【解决方案1】：

我在使用 gulp-sass 时遇到了同样的问题。如果要导入整个目录，则必须添加 gulp-sass-bulk-import。

您可以通过将其安装到您的项目中来做到这一点，如下所示：

npm install --save-dev gulp-sass-bulk-import

然后在你的 gulpfile.js 中：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    bulkSass = require('gulp-sass-bulk-import');

gulp.task('sass', [], function() {
    gulp.src( 'sass/**/*.scss' )
        .pipe( bulkSass() )
        .pipe( sass().on('error', sass.logError) )
        .pipe( gulp.dest( './css/' ));
});

确保您使用正确的包来处理 sass 文件：

npm install --save-dev gulp-sass

还有另一个包 gulp-ruby-sass 不能与上面的脚本一起使用，虽然它也很方便。

享受吧。

【讨论】：