JekyllでSassのSource Mapの生成をコントロールする

Posted : 13 Apr 2020

JekyllでCSSのSouce Mapファイルが生成される動作を変更する。

このサイトはJekyllを用いて作成しているが、デフォルトではCSSのSource Mapファイルが生成されてSassが公開される状態だった。
_config.ymlを変更することで動作を変更できたので対応内容を記載する。

環境

• Jekyll-4.0.0
• jekyll-sass-converter-2.1.0

事象

Jekyllのデフォルト設定では次の画像の様にCSSの Source Mapが生成されていた。
Web上にSassを公開するのはどうなの？ ということで、動作を変更する。

対応

JekyllはSassのコンパイルにjekyll-sass-converterを使用している。
Jekyllの_config.ymlに設定を追加することで、jekyll-sass-converterの動作を変更できる。

対象となる設定項目の sourcemap では、次の設定が可能。

• never : Souce Mapは 常に生成されない
• always : Source Mapは 常に生成される
• development : Source Mapは 環境変数「JEKYLL_ENV」がdevelopmentの時のみ生成される

設定は_config.ymlに以下のように記述する。

sass:
  sourcemap: development

developmentを指定した際は、bundle exec jekyll serveではSource Mapは生成されるが、JEKYLL_ENV=production bundle exec jekyll buildでproduction用の静的ファイル生成を行うとSource Mapは生成されなくなる。

次の画像はproductionで生成したコードとなる。