0

gulpを使い、sassのコンパイル環境を構築しようとしています。諸々のインストールとgulpfile.jsなどを作り、gulpfile.jsにtaskを書いたのですが、実行してもこのエラーでうまくコンパイルされません。

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: develop/style.sass
Error: Invalid CSS after "body {": expected "}", was "{}"
        on line 1 of develop/style.sass
>> body { {}
   ------^

    at options.error (/Users/suzuki/Local Sites/www/app/public/wp-content/themes/test/node_modules/node-sass/lib/index.js:291:26)

ちなみに、ファイル構造、gulpfile.js内は以下のように書いてます。

    project
     └develop
        └sass
     └production
        (└css ← ここにコンパイルしたい)

↓ gulpfile.js内

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

gulp.task("sass",function(){
   gulp.src("/Users/suzuki/Local Sites/www/app/public/wp-content/themes/org/develop/style.sass")
       .pipe(sass())
       .pipe(gulp.dest("/Users/suzuki/Local Sites/www/app/public/wp-content/themes/org/production"))
       console.log("コンパイル完了");
});

styleの中身です。sassの入門記事を参考にとりあえず入れてみたものです。

html {
background:red;
body {
    background:blue;
}}

ご回答、よろしくお願いします

2
  • 1
    エラー内容からするとstyle.sassの方に原因がありそうですが、そちらの内容を追記することは可能でしょうか?
    – maot
    Commented 2017年8月7日 1:15
  • 初心者なため、よくわからない質問で申し訳ないです。アドバイス、編集ありがとうございます!stykeの中身を掲載してみました。何卒、よろしくお願いします。
    – suzukisan
    Commented 2017年8月9日 5:09

1 件の回答 1

1

解決案①

拡張子をsassとして記載する場合は、インデントで調整して階層構造を表現してください。

html
  background:red;
  body
    background:blue;

解決案②

記載内容から"{}"を入れ子で書きたいのかと思います。その場合はファイルの拡張子をscssに変えてください。

style.sass -> style.scss

拡張子がscssとなっていれば質問内容にある書き方のままで問題ありません。

html {
  background:red;
  body {
    background:blue;
  }
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。