beta

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

Visual Studio CodeのSCSSの自動変換で生成されたCSSに@charsetが入ってしまってAMPバリデートでエラーを吐いてたので対処方法をまとめました。

公開日:2020年2月20日

現象

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には日本語を使わない」というルールを決めておくと良さそうですね。

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード