Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

デバッグモードで効いてるCSSが通常モードで反映されない

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

Requirements

現象

デバッグモード(https://some.site.com/index_dev.php)ではCSSが適用されているのに、デバッグモードを外す(https://some.site.com/)とCSSが適用されない。

Chromeの開発者ツールで確認すると、デバッグモードではたしかに追加したlink要素があるのに、通常モードではlink要素が追加されていない。

default_frame.twigにはたしかにlink要素を追加してある。いや、追加してあるからこそデバッグモードでは表示されているのだが……。

{% block meta_tags %}{% endblock %}
<link rel="icon" href="{{ app.config.front_urlpath }}/img/common/favicon.ico">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/style.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/slick.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/default.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.public_path }}/plugin/{SomePluginCode}/assets/css/style.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<!-- for original theme CSS -->
{% block stylesheet %}{% endblock %}

観察力

いやいや待てよ。

{% block stylesheet %}{% endblock %}

これなんだ?

ブロックの中が空になっている。

link要素はmeta_tagsブロックとstylesheetブロックの外に書かれている……これが原因か!

{% block meta_tags %}{% endblock %}
<link rel="icon" href="{{ app.config.front_urlpath }}/img/common/favicon.ico">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/style.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/slick.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/default.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<!-- for original theme CSS -->
{% block stylesheet %}
<link rel="stylesheet" href="{{ app.config.public_path }}/plugin/SomeEc/assets/css/some.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
{% endblock %}

管理画面からTwigテンプレートのキャッシュを削除したら、無事に反映された。

stylesheetブロックの外に書いたものは、デバッグモードでだけ反映されるのだろうか……いや、それなら他の3枚のCSSも同じ挙動にならなければおかしいし……何かのバグのような気もするけれど、デバッグモードにだけ適用されるCSSがあるとしたら、何かに使えそうな気もする。たとえば、type="hidden"の要素をデバッグモードで表示させるとか……。