JekyllでSassのSource Mapの生成をコントロールする
Posted : 13 Apr 2020Jekyllで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は 環境変数「JEKYLLENV」がdevelopmentの時のみ生成される
設定はconfig.ymlに以下のように記述する。
sass:
sourcemap: development
developmentを指定した際は、bundle exec jekyll serve
ではSource Mapは生成されるが、JEKYLLENV=production bundle exec jekyll build
でproduction用の静的ファイル生成を行うとSource Mapは生成されなくなる。
次の画像はproductionで生成したコードとなる。
