1

先週、Ruby for Rails を手に入れたばかりですが、アセット パイプラインに問題があるのではないかと推測しています。具体的には、Rails 4 アプリケーションの DataTables テーブルのデフォルト スタイルをオーバーライドしたいのですが、custom.css.scss を変更しても何も起こりません。スタイリングは明らかにdataTables/jquery.dataTablesから来ています。私がやろうとしているのは、次の行に沿って、交互の行の背景色が異なるようにテーブルをストライプすることだけです。

tr.odd {
  background-color: pink;
}

tr.even {
  background-color: red;
}

この datatables.css ファイルは、編集または置換できるようにアプリケーションのファイル ツリーのどこにインストールされているのでしょうか。それがローカルでない場合は、独自のカスタム ファイルをどこにインストールしてその仕様をオーバーライドできますか?

アプリケーション.css:

*= require_self
*= require_tree .
*= require jquery.ui.core
*= require jquery.ui.theme
*= require dataTables/jquery.dataTables

注: jquery.dataTables 要件を削除すると、custom.css.scss が有効になります。

宝石ファイル:

# Use jquery as the JavaScript library
gem 'jquery-rails'

# JQuery UI
gem 'jquery-ui-rails'

# Datatables JQuery plugin
gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git'

編集：

注意: .app/assets/datatables/jquery.dataTables.css の下に jquery.datatables.css というスタイルシートを含めようとしましたが、Rails はそれを無視します。アイデアはこの記事から生まれましたが、著者が言っていることを誤解しているか、Rails 4 では動作しません。

4

2 に答える 2

4

もう少し検索と実験を行ったところ、適切な答えを見つけることができました。

Ruby On Rails アセット パイプラインを調べたところ、Sprockets は、./app/assets と .app/public の両方で application.css ファイルにリストされているものを実際に検索することがわかりました。秘訣は、次の 2 つの方法のいずれかで jquery.datatables.css のコピーを取得することです。

1) RoR アプリにデフォルトの dataTables テーブルを実装します。ブラウザでソースを表示します。jquery.datatables.css リンクをクリックし、エディターにコピーして貼り付けます。また

2) DataTables の最新の標準 (非レール) ディストリビューションをダウンロードし、DataTables -xxx/media/css/jquery.datatables.css の下で jquery.datatables.css のコピーを見つけます。

置き換えて application.css ファイルを変更します。

*= require dataTables/jquery.dataTables

と

*= require jquery.dataTables

jquery.datatables.css のローカル コピーをニーズに合わせて自由に変更できるようになりました。Sprockets が検索する 2 つの場所 (./app/public または .app/assets) のいずれかに必ず保存してください。私の場合、カスタム jquery.datatables.css ファイルをここに配置することがわかりました。

.app/assets/datatables/jquery.datatables.css

application.css私のファイルの次の行に同意しました：

*= require jquery.dataTables

css ファイルの場所が application.css ファイルで指定したものと一致している必要があります。そうしないと、Ruby on Rails が指定されたアセットを見つけられない場合に厄介なエラー ページが表示されます。私が犯したエラーは、application.css をファイルの実際の場所と一致させることができなかったことです。ここで jquery.datatables.css を見つけると、スプロケットは他のスタイルシートと一緒に jquery.datatables.css も見つけます (application.css に適切な行がある場合:

.app/assets/stylesheets/jquery.datatables.css

最初は css フラグを使用する!importantことで目的を達成できましたが、コードにフラグを散りばめてしまうと、非常に近いうちに管理が困難になってしまいます。何時間もの検索で、Ruby on Rails 用に DataTables をカスタマイズするためのこの非常に基本的な最初のステップのガイドを見つけることができませんでした。

于 2013-11-15T08:02:14.933 に答える
1

問題は、アセットを要求する順序にある​​と思います。custom.css.scssafterが必要ですjquery.dataTables。application.css を次のように変更してみてください。

*= require_self
*= require jquery.ui.core
*= require jquery.ui.theme
*= require dataTables/jquery.dataTables
*= require_tree .

ご覧のとおり、require_tree .の後に使用してい*= require dataTables/jquery.dataTablesます。

アップデート：

!importantこれが機能しない場合、css には次のような 's'が含まれていると思います。

tr.odd {
  background-color: pink !important;
}

tr.even {
  background-color: red !important;
}
于 2013-11-15T00:44:40.927 に答える