gulp-sassでエラーが出て動かない原因 node_modules/gulp-sass/index.js:38

14626 ワード
Sass gulp error Node.js Node.js テキストリンク

※ gulp-sassのv2 以降から errLogToConsole オプションが使えなくなりました。

gulp-sassで下記のようなエラーが出る場合


node_modules/gulp-sass/index.js:38
    opts.data = file.contents.toString();
              ^

TypeError: Cannot assign to read only property 'data' of /Users/YourName/public/assets/sass/app/app.sass
    at DestroyableTransform._transform (/Users/YourName/node_modules/gulp-sass/index.js:38:15)
    at DestroyableTransform.Transform._read (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
    at doWrite (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:313:64)
    at writeOrBuffer (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:302:5)
    at DestroyableTransform.Writable.write (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:241:11)
    at DestroyableTransform.ondata (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
    at emitOne (events.js:90:13)
    at DestroyableTransform.emit (events.js:182:7)
    at readableAddChunk (/Users/YourName/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:198:18)

対策

gulpfile.jsのsassコンパイルタスクを見直す

gulp-sass v1

gulpfile.js

var gulp              = require('gulp');
var sass              = require('gulp-sass');
var assets            = __dirname + '/public/assets/';

gulp.task('sass', function() {
  gulp.src(assets + 'sass/**/**.sass')
    .pipe(sass({errLogToConsole: true}))
    .pipe(gulp.dest(assets + 'css/'))
});

gulp-sass v2 以降

gulp-sassではnode-sassを利用で、エラーがコールバックがされるようになりました。

gulpfile.js

var gulp              = require('gulp');
var sass              = require('gulp-sass');
var assets            = __dirname + '/public/assets/';

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

この部分を

gulpfile.js
.pipe(sass({errLogToConsole: true}))

以下の記述に変更する

gulpfile.js
.pipe(sass().on('error', sass.logError))