LoginSignup
6
5

More than 5 years have passed since last update.

Drupalキャッシュを有効化するとテーマが崩れる

Last updated at Posted at 2016-02-26

Drupal管理画面のパフォーマンス設定で 帯域幅最適化 > CSSファイルをまとめて圧縮する(Aggregate and compress CSS files.) のチェックをオンにしておくと複数CSSファイルをひとつにまとめてくれます。

スクリーンショット 2016-02-26 19.48.59.png

帯域幅最適化の設定をしておくと、ファイルサイズが減少するので回線の帯域の使用率が軽減されることと、ファイル数が減ることでセッション数減り、パフォーマンスが向上します。

DrupalのCSSファイル圧縮機能の仕組みは、複数CSSファイルを1つのCSSファイルにまとめて「sites/default/files/css」に保存されて、以降はこの圧縮ファイルがロードされるようになります。

ただ、このCSS圧縮機能を有効にしているときに、ごくまれにテーマが崩れることがあります。

テーマが崩れる原因

理由は以下5つが挙げられます。

1. 圧縮CSSの保存先にApacheユーザーの書き込み権限がない

DrupalはApacheユーザーで動作するので、そのユーザーにフォルダ書き込み権限がなければCSSファイルを生成できずに表示崩れの原因になります。

2. cssファイルの中で @import を使っている

CSSファイル内で @import を使っているとファイル順序がバラバラになってしまい、意図した継承・上書きがされなくなってしまいます。
@import を使っていないつもりでも導入モジュールの中で使われていることがあるので、意図せずにテーマが崩れたらその辺が原因になっている可能性はあります。
導入モジュールが原因のときはコントリビュートモジュールを修正するわけにもいかないので、テーマ側のCSSファイル上で @!important などを利用して影響を受けないような工夫をする必要があります。

ただし、CSSファイルに記述した場合に問題が起こりますが、SASS/SCSSで使う分には問題ありません。

3. cssの圧縮ファイルの保存ディレクトリに英数字とアンダースコア以外の特殊文字を使っている

保存ディレクトリに英数字とアンダースコア以外の特殊文字を使っている場合にCSSファイルが保存されないと、Drupal.orgのスレッド上で報告がされています。

4. cssをgzip圧縮の設定をしているときに古いIEブラウザが読み込めない

古いIEブラウザ(IE6)は、gzip圧縮されたCSSを解釈できませんでした。ただ、2016年時点でIE6に遭遇することはないので気にすることはないでしょう。

5. CSSのgzip圧縮で失敗する

この問題が起こるのは .htaccessファイルに自前でgzip圧縮の処理を書いてしまっている場合に、記述ミスなどが原因によるものです。
回避方法は、自前で処理を書かずにApacheのmod_deflateに任せるか、または Drupalモジュール「Advanced CSS/JS Aggregation(advagg)」を導入することです。

ほかの原因には、Drupalキャッシュ + (nginx + Varnish)でcssのgzip圧縮が失敗するという報告があります。
ウェブサーバがnginx + Varnishの組み合わせでは常にCSS・JSファイルをgzip圧縮されるが、Drupalキャッシュと合わさるとファイルエンコーディングがおかしくなることが原因のようです。
解決策は、Drupalキャッシュを有効化する場合、nginx + Varnishのデフォルト設定を変更する必要があります。

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5