ウェブエンジニア珍道中

日々の技術的に関する経験を書いていきます。脱線もしますが助けになれば幸いです。

RailsでSlimを使った時に起こる「開発環境だけ見た目が崩れる問題」の解消

問題について

https://github.com/slim-template/slim-railsを使って開発をしていると、特定の条件で開発環境下(development)でのみ見た目が崩れる減少が起きていました。

長らく原因がわからず解消できませんでしたが、先日ようやく何とかできたので紹介します。

発生条件

CSSで以下の設定が入っているDOM要素で起こりました。

white-space: pre-wrap;

これは「スペースは詰めずにそのまま表示してね」というもので、意図して入力された空白をそのまま表示するために入れていました。

このCSSの設定を入れると開発環境でのみ見た目が崩れてました。

対策

config/environments/development.rbにこの設定を書き換えると直ります。

Slim::Engine.set_options pretty: false

原因

slim-railsがdevelopment環境下ではHTMLの見やすさのためか、不要なスペース(タブ)を入れていたのが原因です。

CSSの設定によってはそのまま表示してしまうため、見た目が崩れてしまいます。

またその処理がなくてもブラウザのデベロッパーツールで見ると整形してくれているので、いらないケースが多いです。

なので上記の設定を書き加えて無効化してやるわけですね。

本番環境では大丈夫ですが、開発時に見た目が崩れてチェックができなかったりしたので何とかできて良かったです。