質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

3回答

2506閲覧

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

TommySeptember

総合スコア5

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2020/02/10 04:21

編集2020/02/10 04:50

前提・実現したいこと

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系にバージョンアップされている方は、同じ現象になっていないでしょうか?

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

$ node -v
v12.13.0

$ npm -v
6.13.7

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

Javascript

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

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

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

投稿2020/02/10 05:31

編集2020/02/10 05:40
technocore

総合スコア7200

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TommySeptember

2020/02/10 08:53

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

2020/02/10 11:25

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

0

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

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

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

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

投稿2020/02/10 11:39

TommySeptember

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

回答ではありませんが、うちの環境は
"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

1html { 2 color: #000; 3} 4 5html::after { 6 content: ""; 7}

となりました。

投稿2020/02/10 05:01

technocore

総合スコア7200

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TommySeptember

2020/02/10 05:21

返信誠にありがとうございます。 technocore様の方でも実行していただきありがとうございます。 私の環境を追記させていただきます。 node.js 12.15.0 npm 6.13.4 となっておりますが、 technocore様の方のバージョンも同じでしょうか? 教えていただけると大変助かります。 よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問