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

Question

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

Вы можете сделать это, установив его в свой проект, как показано ниже:

НПМ установки --save-DEV Глоток-дерзость навалочных-импорт

Тогда внутри вашего 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 файлов:

НПХ установить --save-DEV Глоток-Сасс

Существует еще один пакет Глотка-рубиновая дерзость, который не будет работать с выше сценарием, хотя его также удобно.

Наслаждайтесь.