

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

[code]

    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)
    
[/code]

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

[code]

        project
        　└develop
        　　  └sass
         └production
            （└css ← ここにコンパイルしたい）
    
[/code]

↓ gulpfile.js内

[code]

    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("コンパイル完了");
    });
    
[/code]

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

[code]

    html {
    background:red;
    body {
        background:blue;
    }}
    
[/code]

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


CC BY-SA 3.0
2017-08-06T13:12:25.553
36979
2017-08-17T11:17:41.707
2017-08-17T07:24:55.330
24754
24754
question
javascript gulp sass
gulp-sassを実行すると Invalid CSS のエラーが発生する


## 解決案①

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

[code]

    html
      background:red;
      body
        background:blue;
    
[/code]

## 解決案②

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

[code]

    style.sass -> style.scss
    
[/code]

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

[code]

    html {
      background:red;
      body {
        background:blue;
      }
    }
    
[/code]


CC BY-SA 3.0
2017-08-09T06:10:37.753
37050
2017-08-09T06:17:53.473
2017-08-09T06:17:53.473
20272
20272
36979
answer