SCSSの変換で@charsetが入ってしまう場合の対処方法

現象

main.scssというファイルをVisual Studio Codeの拡張機能「Live Sass Compiler」で自動変換をかけてたところ、AMPバリデータでエラーを吐いてました。

確認したところ、出力先のmain.cssファイルの頭に、指定していない

@charset "utf-8";

が入っていたのが原因でした。

対処方法

調べてみたところ、Live Sass Compilerは、charset指定が必要と判断した場合に、頭に自動でcharsetを入れるようです。

charsetが必要と判断されるのは、

• scssファイルに2バイト文字（つまり日本語）が入っている
• 2バイト文字は、css本文だけでなく、コメントも対象

ということで、main.scssファイルから日本語のものを削除すれば対処できます。

font-familyはどうするか？

若干厄介なのがcss内でのfont family指定で、

body{
  font-family: 'Meiryo',"ヒラギノ角ゴ ProN W3","MS P ゴシック","Osaka", sans-serif;
}

という感じで指定していると、ここも2バイト文字だと判断されて、charset指定が入ります。

どうすれば良いかというと、font-familyは対応する英語表記もあるので、

body{
  font-family: 'Meiryo',"HiraKakuProN-W3","MS Pgothic","Osaka", sans-serif;
}

とすれば、先ほどの日本語表記と同等になります。

知ってしまえば簡単なことですが、気をつけないとAMPフォーマットのサイトなどでエラーが出るので、「自動変換するSCSSには日本語を使わない」というルールを決めておくと良さそうですね。