【Gulp】Sassのコンパイル時に文字コード指定記述(charaset)を保持する方法Web2019年2月8日Gulpでsassファイルをコンパイルしてcssを出力した際、sassファイルで書いたはずのcharasetが消されてshift-jisで保存されてしまうことがあります。本記事では確実に、1行目にcharasetが記述された状態でcssがコンパイルされるようにするgulp記述をご紹介させていただきたいと思います。マルチバイト文字があるとcharasetは出力されるなぜこんな仕様なのか謎なのですが、sassファイル内にマルチバイト文字があるとcharasetは出力され、無い場合は出力されません。これはコメントアウト内の文字列も含まれます。これではサーバの文字コードがUTF-8なのに、shift-jisで出力されてしまうといった困った状況が発生することになります。2つのモジュールで解決そこで、以下の2つのモジュールを使うことでこの問題を解決することが可能です。gulp-headergulp-replacegulp-headerこのモジュールを使うことで、コンパイルされるcssファイルの先頭に任意の記述を挿入することができます。gulpfile.jsで以下のように記述することで、マルチバイトがあろうがなかろうが先頭にcharasetが挿入されます。.pipe(gulp.dest('shared/css'));});ただしこのモジュールだけでは対応としては完全ではなく、これではsassファイル内にマルチバイト文字があった場合、以下のようにcharasetが重複して記述されてしまいます。"UTF-8";gulp-replaceそこで、さらにモジュール「gulp-replace」を活用します。このモジュールを使うことで、任意の文字列を置換することが可能です。"UTF-8";」を全て削除してから前述のgulp-headerでcharasetを挿入するようにします。.pipe(gulp.dest('shared/css'));});これでcharasetの出力有無を気にする必要がなくなります。まとめ本記事を執筆するにあたって、以下の記事を参考にさせていただきました。gulpでSassをコンパイルするとcharset指定が削除されるおそらくコメントアウトなどに日本語を使うクセのあるエンジニアの場合、遭遇しない現象なのだと思いますが自分の場合、極力日本語をsassファイル内に書かないスタンスなので、本対応が必要になりました次第です。「cssファイルが意図した文字コードでコンパイルされない」「charasetが出力されない」などでお困りの方は、ぜひ本記事をご参考にしていただければ幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。