DesignAssembler

備忘録に近い

CSSが適用されない(AssetPipeline)

production環境でcssとjsが適用されません。

プリコンパイルしてアクセスしてページのソースを表示すると生成されたcssは読み込まれていますが、jsが

Uncaught TypeError: t.widget is not a function

(とその他)を吐いています。

stackoverflow.com


stackoverflowによると

jQuery Ui was included twice (second time hidden because of another bug)

jQuery Uiが2回ロードされてた、とのことです。

プリコンパイル複数ファイルに分割すれば直りそうです。

自分のプリコンパイルに含まれるファイルは以下のようになっています。

#vendor/assets/javascripts内
bootstrap-editable-demo.js      bootstrap.min.js  ie.js                jquery-ui-extras.min.js  pixel-admin.js
bootstrap-editable-demo.min.js  demo-mock.js      ie.min.js            jquery.mockjax.js        pixel-admin.min.js
bootstrap.js                    demo-mock.min.js  jquery-ui-extras.js  jquery.mockjax.min.js

bootstrap系とjquery系とpixeladmin系の3つに分けてプリコンパイルします。

変わらず反映されない。

あれ、よく見たらdevelop環境でも同じエラー出てるのにcssとjsは動いてる。

ちょっとよくわからなくなってきた

状況の整理
production環境でcssが適用されない
develop環境では適用されている
jsはproduction環境でも適用されている
問題点があるとしたらcssファイルの内部ではなくてproduction.rbやnginx.conf等、連携の問題だろうと予測

production.rbとnginx.confをいろいろ触ったのですが変わらず適用されませんでした。

html内のstyle属性はちゃんと表示されました。


解決

解決は突然でした。

プリコンパイルで生成されたapplication-.cssの先頭に以下のような感じで適当にスタイルを書きました。

aaaaaa{
    border:1px solid #aa00ee;
}

すると無事にcssが反映されました。この追加したスタイルは適用されずに。

いったい何が起こったのかわかりません。

この後上の3行を削除しても適用され続けました。

本当に気持ちが悪いです。




AssetPipelineのいい勉強になりました。