SASSコンパイル時に「"Invalid UTF-8"」エラーでハマった話

エラー発生の経緯

UdemyでCSSのtips的な講座を進めていたときに

1.まずはCSSで記述をある程度行う
2.講座の序盤でsass導入、環境構築
3.引き続きsass（scss形式）でCSS学習

という流れでおこなっていたんですが
その中で「おっこの表現いいじゃん！」という部分をガンガンCSSファイル内に
/* */
でメモコメント入れまくっておりました

で、2で環境構築し、コンパイルをいざしよう！としたときに
yarnでもnpmでもコマンド実行時に下記のエラーが出る状態となりました。

{
  "status": 3,
  "message": "Invalid UTF-8",
  "formatted": "Internal Error: Invalid UTF-8\n"
}
error Command failed with exit code 1.

具体的なコード

package.json
※compile:sassでscssの記述をまとめてcssに吐き出す

{"name":"natous","version":"1.0.0","description":"landing page for natous","main":"index.js","scripts":{"compile:sass":"node-sass sass/main.scss css/style.css","test":"echo \"Error: no test specified\"&& exit 1"},"author":"","license":"ISC","devDependencies":{"node-sass":"^4.14.1"},"dependencies":{}}

scss/一部抜粋。

$color-primary:#55c57a;$color-primary-light:#7ed56f;$color-primary-dark:#28b485;*{margin:0;padding:0;box-sizing:border-box;}.header{height:95vh;background-image:linear-gradient(torightbottom,rbga($color-primary-light,0.8),rbga($color-primary-dark,0.8),/*変数をrgbaに入れることも可能*/),url(../img/hero.jpg);/*背景画像とカラーを重ねる*/background-size:cover;background-position:top;/*背景画像の中心位置を決める*/position:relative;clip-path:polygon(00,100%0,100%75%,0100%);}.btn:hover{transform:translateY(-3px);/*hover時に上に動きクリック時下に少し動くようにすれば、いい感じのボタン
    同様に、box-shadowも下方向の影を少し減らすこと。*/box-shadow:010px20pxrgba(0,0,0,.2);}.btn:active{transform:translateY(-1px);/*20%の影*/box-shadow:05px20pxrgba(0,0,0,.2);}

これまで何度かsassの環境構築はしていたのにみたことないエラーだったので、
過去のsassで構築しているサイトと比べてみたり、下記の内容を再確認してみました。

試したこと1：Invalid UTF-8でググる

SCSSファイルの最初に「@charset "UTF-8";」が書かれていないケースがあるという事例があったので追加→解決せず

試したこと2：コンパイルの書き出し元、書き出し先再確認

問題なし

試したこと3：久しぶりの構築だから特定のバージョンだけのバグかと考えnode-mojudleの削除から再度npm install

解決せず

ーーーーーーーーーーーーー

原因はscssの記述内容：コメントアウトでした

こりゃ困ったなあと思いながら試しに一旦sassの記述を一部除いてほぼ消してみてコンパイルすると、うまく行きました！
こりゃどっかscssの記述ミスか〜〜と思って少しずつ削除したりしながらコンパイル繰り返していて、原因を突き止めました。

.header{height:95vh;background-image:linear-gradient(torightbottom,rbga($color-primary-light,0.8),rbga($color-primary-dark,0.8),/*変数をrgbaに入れることも可能*/),url(../img/hero.jpg);/*背景画像とカラーを重ねる*/background-size:cover;background-position:top;/*背景画像の中心位置を決める*/position:relative;clip-path:polygon(00,100%0,100%75%,0100%);}

「/* 」と「*/」で囲っているコメントのうち、「変数をrgbaに入れることも可能」の部分が原因でした。

qiita上でも色も付いちゃってて明らかに怪しいですね。。
エディタ上ではグレーアウトもされておりエラー内容にも全く記述がなかったのでしばらく気づきませんでした。どうも、こういうショートハンドの間に/　/でコメント入れるのはよくないようです。

ちなみに

なぜか下記のような // でのコメントアウトの仕方だとうまく行きます。

.header{height:95vh;background-image:linear-gradient(torightbottom,rbga($color-primary-light,0.8),rbga($color-primary-dark,0.8),//変数をrgbaに入れることも可能),url(../img/hero.jpg);/*背景画像とカラーを重ねる*/background-size:cover;background-position:top;/*背景画像の中心位置を決める*/position:relative;clip-path:polygon(00,100%0,100%75%,0100%);}

さらにいうと、まとめてて気づきましたが記述の仕方も少し間違ってて一つ「,」が多かった。正しくはこうですね。

.header{height:95vh;background-image:linear-gradient(torightbottom,rbga($color-primary-light,0.8),rbga($color-primary-dark,0.8)),//変数をrgbaに入れることも可能url(../img/hero.jpg);/*背景画像とカラーを重ねる*/background-size:cover;background-position:top;/*背景画像の中心位置を決める*/position:relative;clip-path:polygon(00,100%0,100%75%,0100%);}

この書き方であれば、同じ場所のコメントでも、/**/でも//でもきちんとコンパイルできました。

まとめ

いずれにせよ、ショートハンドの途中でコメントを入れるのはよくない気がするので、
無難に記述がひと段落ついてからコメントを入れること、
またエラーからぐぐるだけではなく、そもそもの記述も間違っていないか怪しむこと
を意識しようと思いました。