Ошибка Sass-gulp при импорте всего каталога

Question

Начну с того, что я искал несколько часов и не нашел решения, которое подходит мне. Я пытаюсь уйти от 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 выглядит следующим образом (вверху есть куча комментариев):

@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, так далее.

Если я добавлю полный путь к определенному файлу, он будет работать, но глобализация не работает. Любая помощь будет принята с благодарностью!

Answer 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 --save-dev gulp-sass

Есть еще один пакет gulp-ruby-sass, который не будет работать с вышеуказанным скриптом, хотя он также удобен.

Наслаждаться.