Requirements
- [EC-CUBE] EC-CUBE3.0.16
現象
デバッグモード(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"の要素をデバッグモードで表示させるとか……。
