0

アプリケーションの show.html.haml ページでのみ特定のテーブル スタイルを使用する必要があります。具体的には、このスタイリングを _form.html.haml パーシャルのフォームに適用したくありません。スタイル要素は次のとおりです。

  table {
    border-collapse: collapse;
    width:100%;
  }

  td, th {
    border: 1px solid gray;
    padding:5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: ellipsis;
  }

  th {
    background-color: #ccc;
    text-shadow: 1px 1px 1px rgba(0,0,0,.2);
  }

app/vendor/assets/web-app-theme/stylesheets ディレクトリに data_tables.css という小さなファイルを作成し、次のように application.js に含めました。

*= web-app-theme/data_tables が必要

問題は、show.html.haml ページ (これは必要) のテーブルだけでなく、_form_html.haml パーシャル (これは必要ない) にも影響することです。どうやら、アセットの編成について完全に理解していないことがあるようです。app/assets/stylesheets ディレクトリにある application.css ファイルの内容は次のとおりです。

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require web-app-theme/base
 *= require web-app-theme/style
 *= require web-app-theme/wat_ext
 *= require web-app-theme/data-tables
 *= require formalize
 *= require jquery.ui.core
 *= require jquery.ui.theme
 *= require jquery.ui.tabs
 *= require dataTables/src/demo_table_jui
 *= require_self
 *= require_tree . 
*/
4

1 に答える 1

1

マニフェストで宣言するものはすべて、アセットのコンパイル中に単一のファイルにダンプされます。問題の最善の解決策は、CSS に影響を与えたいテーブルにクラスを割り当て、それに応じて変更することです。

stylesheet_link_tagまたは、このファイルをマニフェストから削除して、次のようにビューから呼び出すこともできます。

<%=stylesheet_link_tag "web-app-theme/data_tables"%>

ただし、サーバーへのリクエストの量が増えるため、小さなファイルには使用したくないものです。

于 2012-04-23T16:17:09.457 に答える