エラー発生の経緯

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(to right bottom,
    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(0 0,100% 0,100% 75%, 0 100%);
}



.btn:hover{
    transform: translateY(-3px);
    /*hover時に上に動きクリック時下に少し動くようにすれば、いい感じのボタン
    同様に、box-shadowも下方向の影を少し減らすこと。*/
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
}

.btn:active{
    transform:translateY(-1px);/*20%の影*/
    box-shadow: 0 5px 20px rgba(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(to right bottom,
    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(0 0,100% 0,100% 75%, 0 100%);
}

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

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

ちなみに

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


.header{
    height: 95vh;
    background-image:linear-gradient(to right bottom,
    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(0 0,100% 0,100% 75%, 0 100%);
}

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


.header{
    height: 95vh;
    background-image:linear-gradient(to right bottom,
    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(0 0,100% 0,100% 75%, 0 100%);
}

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

まとめ

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