gulp4にバージョンアップ後、sassの書き方でエラーでてコンパイルしなくなった。。。

Question

前提・実現したいこと

gulp3系から4系にバージョンアップをしました。

全てうまくコンパイルできたかと思っていた矢先に、
scss記法でうまくコンパイルせず、
エラーがでるようになりました。

発生している問題・エラーメッセージ

次のscss記法を書くとエラーが発生します。

@charset "UTF-8";

$color: #000;

html{
	color: $color;

	&::after{
		content: "";
	}
}

[13:11:08] 'sass' errored after 12 ms
[13:11:08] Error: missing '}' near line 9:5
    at error (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:57:15)
    at declarations (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:224:26)
    at rule (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:481:21)
    at rules (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:103:56)
    at stylesheet (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:73:16)
    at module.exports (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:485:10)
    at Transform.transform [as _transform] (/Users/fuca_mac5/Desktop/gulp4/node_modules/gulp-combine-media-queries/index.js:133:19)
    at Transform._read (/Users/fuca_mac5/Desktop/gulp4/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at Transform._write (/Users/fuca_mac5/Desktop/gulp4/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (/Users/fuca_mac5/Desktop/gulp4/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_writable.js:237:10)

ネスト部分を削除するとエラーしない

@charset "UTF-8";

$color: #000;

html{
	color: $color;
}

[13:15:30] Starting 'sass'...
[13:15:30] Finished 'sass' after 66 ms

mixinなども同様にエラーする

@charset "UTF-8";

// メディアクエリ
// --------------------------------------------------
@mixin mq($breakpoint: m){
	@if $breakpoint == ss {
		@media screen and (max-width: 340px) {
			@content;
		}
	} @else if $breakpoint == s {
		@media screen and (max-width: 450px) {
			@content;
		}
	} @else if $breakpoint == m {
		@media screen and (max-width: 750px) {
			@content;
		}
	} @else if $breakpoint == l {
		@media screen and (max-width: 970px) {
			@content;
		}
	} @else if $breakpoint == ll {
		@media screen and (max-width: 1070px) {
			@content;
		}
	} @else if $breakpoint == 355 {
		@media screen and (max-width: 355px) {
			@content;
		}
	}
}

[13:17:10] Starting 'sass'...
[13:17:10] 'sass' errored after 13 ms
[13:17:10] Error: missing '}' near line 7:5
    at error (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:57:15)
    at declarations (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:224:26)
    at rule (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:481:21)
    at rules (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:103:56)
    at stylesheet (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:73:16)
    at module.exports (/Users/fuca_mac5/Desktop/gulp4/node_modules/css-parse/index.js:485:10)
    at Transform.transform [as _transform] (/Users/fuca_mac5/Desktop/gulp4/node_modules/gulp-combine-media-queries/index.js:133:19)
    at Transform._read (/Users/fuca_mac5/Desktop/gulp4/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at Transform._write (/Users/fuca_mac5/Desktop/gulp4/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (/Users/fuca_mac5/Desktop/gulp4/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_writable.js:237:10)

gulpfile.js

const gulp = require('gulp'),
  rename = require('gulp-rename'),
  replace = require('gulp-replace'), // 文字列置換をする(ここでは、コンパイル後のcssの余分な改行余白を削除として使用)
  plumber = require('gulp-plumber'), // エラー時の強制終了を防止
  notify = require('gulp-notify'); // エラー発生時にデスクトップ通知する

const autoprefixer = require("gulp-autoprefixer"), // ベンダープレフィックスの自動付与
  sass = require("gulp-sass"),
  sassGlob = require('gulp-sass-glob'), // 複数のimportを短く設定できる
  header = require('gulp-header'), // CSSの先頭に記述できる
  csscomb = require('gulp-csscomb'), // CSSプロパティ記述順序を設定する
  cmq = require('gulp-combine-media-queries'), // Media Queruesをまとめてくれる(設定が必要：152行目をコメントアウト)
  stripdebug = require('gulp-strip-debug'), // consoleを消してくれる
  uglify = require('gulp-uglify'); // ファイルを圧縮(min化)してくれる


/// 監視フォルダ ////////////////////////////////////////////
gulp.task("watch", () => {
  gulp.watch("assets/**/*.scss", gulp.series("sass"));
});

/// scssコンパイル ////////////////////////////////////////////
gulp.task("sass", () => {
  return gulp.src('./assets/scss/**/*.scss')
    .pipe(plumber({
      errorHandler: notify.onError("Error: <%= error.message %>")
    }))
    .pipe(csscomb())
    .pipe(sassGlob())
    .pipe(autoprefixer({ cascade: false }))
    .pipe(cmq())
    .pipe(sass({ outputStyle: 'compact' }).on('error', sass.logError)) // compactまたは、compressed
    .pipe(header('@charset "UTF-8";\n\n'))
    .pipe(replace("}\n\n", "}\n"))
    .pipe(gulp.dest('./css/'));
});

/// Gulpコマンド ////////////////////////////////////////////
gulp.task('default', gulp.series(gulp.parallel('sass', 'watch')));

gulp3系時とソース自体は変えてません。

scssの書き方は、gulp3系の時と変えてはいません。
ネスト記法がかけないscssってまずあり得ないかとおもいますので、
gulp4系にバージョンアップされている方は、同じ現象になっていないでしょうか？

どなたか解決案を伝授いただけませんでしょうか？
よろしくお願いいたします。

Answer 1

追記
うちの環境はMacOS Catalinaで
Homebrewのnodebrewで環境構築しています

$ node -v
v12.13.0

$ npm -v
6.13.7

試してみた実行スクリプトはとても単純で、これだけです。

const compile_sass = function () {
    return src('./stylesheets/**/*.scss', { cwd: './public/source' })
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(dest('./stylesheets', { cwd: './public/development' }));
};

あなたのソースを拝見すると、多数のモジュールをpipeしておられます。
その中にはGulp4に対応していないモジュールもあるかもしれません。

追記2
私の実行スクリプトでは
gulp.task()
は使っていません。非推奨ですし、そのうち動かなくなるかもしれませんので。

Comments

[TommySeptember]

technocore様
ありがとうございます。
今プラグインを入れている物を一度全てとってみてから実装してみようかと思います。
また、「gulp.task()」が非推奨だとはしりませんでした。
こちらも確認してみたいと思います。
ありがとうございます。

[TommySeptember]

technocore様

technocore様のおっしゃっていたとおり、
gulp4に対応していないプラグインがあったみたいでそちらを削除したら、
無事コンパイルできました。

ありがとうございます。

Answer 2

今回、gulp4にバージョンアップしたことで、

gulp-combine-media-queries
がエラーの原因だと判明しました。
もともと、5年前からアップデートはされていなかったので、
今回で使用しないようにしました。

また、
gulp-autoprefixer
もうまく作動してくれなかったので、
こちらも使用しないようにしました。

ちなみに、
gulp-combine-media-queries　→　css-mqpacker
gulp-autoprefixer　→　autoprefixer
に変更しました。

Answer 3

回答ではありませんが、うちの環境は
"gulp": "^4.0.2",
"gulp-sass": "^4.0.2",
です。

あなたのscssで実行してみると
[13:53:09] Starting 'default'...
[13:53:09] Starting 'compile_sass'...
[13:53:09] Finished 'compile_sass' after 24 ms
[13:53:09] Finished 'default' after 37 ms
となってエラーは出ず、結果は

html {
  color: #000;
}

html::after {
  content: "";
}

となりました。

Comments

[TommySeptember]

返信誠にありがとうございます。

technocore様の方でも実行していただきありがとうございます。

私の環境を追記させていただきます。
node.js 12.15.0
npm 6.13.4
となっておりますが、
technocore様の方のバージョンも同じでしょうか？

教えていただけると大変助かります。
よろしくお願いします。