Gulp-sass не удается скомпилировать scss файл

Я использую Gulp для компиляции моего sass в css. Простая задача компилирует файл style.scss каталоге _/sass и сохраняет вывод в корневом каталоге проекта. style.scss используется просто для импорта других файлов в каталог _/sass.

Когда я запускаю задачу по умолчанию из командной строки ($ gulp), я получаю сообщение об ошибке, которое sass не может скомпилировать. Он включен ниже в полном объеме. Я удалил все содержимое из включенных файлов и снова запустил задачу. Я по-прежнему получаю ту же ошибку (что-то, что я читал в Интернете, предположил, что это может протестировать проблему с кодировкой. Я не совсем понимаю кодировку и как это может повредить вещи в моем сценарии).

Я также запускаю из командной строки $ sass _/sass/style.scss style.css который отлично работает с содержимым во входящих файлах. Это говорит о проблеме с самим плагином gulp sass.

Соответствующие фрагменты из gulpfile.js:

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

// Compile sass files
gulp.task('sass', function () {
    gulp.src('./_/sass/style.scss')
        .pipe(sass())
        .pipe(gulp.dest('./'));
});

// The default task (called when you run 'gulp')
gulp.task('default', function() {
  gulp.run('sass');

  // Watch files and run tasks if they change

  gulp.watch(['./_/sass/style.scss'], function() {
    gulp.run('sass');
  })
});

Полное содержимое style.scss:

/* RESET */
@import '_/sass/reset';
/* TYPOGRAPHY */
@import '_/sass/typography';
/* MOBILE */
@import '_/sass/mobile';
/* MAIN */
@import '_/sass/main';

Структура каталогов:

├── _
│   ├── inc
│   │   ├── stuff
│   ├── js
│   │   ├── otherstuff.js
│   └── sass
│       ├── main.scss
│       ├── mobile.scss
│       ├── print.scss
│       ├── reset.scss
│       ├── style.scss
│       └── typography.scss
├── gulpfile.js
└── style.css

Терминал выливается:

[gulp] Using file /Users/jeshuamaxey/project/dir/path/gulpfile.js
[gulp] Working directory changed to /Users/jeshuamaxey/project/dir/path/html5reset
[gulp] Running 'default'...
[gulp] Running 'sass'...
[gulp] Finished 'sass' in 3.18 ms
[gulp] Finished 'default' in 8.09 ms

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
source string:11: error: file to import not found or unreadable: 'reset'

Ответы

Ответ 1

Держите свой импорт как есть, просто передайте параметр includePaths в вашем модуле includePaths в качестве аргумента:

gulp.src('./_/sass/style.scss')
        .pipe(sass({ includePaths : ['_/sass/'] }))
        .pipe(gulp.dest('./'));

... должен сделать это за вас.

Согласно https://github.com/dlmanning/gulp-sass/issues/1

Ответ 2

Для этого вам нужно начать с той же папки gulpfile.js

@import '_/sass/reset'

Я думаю, что Gulp считывает импорт и находит файл, из которого расположены gulpfile.js