【问题标题】:Ruby on Rails css assets pipeline organization issueRuby on Rails css 资产管道组织问题
【发布时间】:2023-03-09 10:33:01
【问题描述】:

我必须在我的应用程序的仅 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 . 
*/

【问题讨论】:

    标签: ruby-on-rails css asset-pipeline


    【解决方案1】:

    您在清单中声明的​​所有内容都会在资产编译期间转储到单个文件中。解决您的问题的最佳方法是将类分配给您希望 CSS 影响的表并相应地更改它。

    或者,您可以从清单中删除此文件并使用 stylesheet_link_tag 从视图中调用它,如下所示:

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

    但它不是您想用于小文件的东西,因为它增加了对您服务器的请求量。

    【讨论】:

    • 谢谢。我听从了您的建议并创建了一个特定的类(和相关元素)。这效果最好。
    猜你喜欢
    • 1970-01-01
    • 2018-12-26
    • 2018-01-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-12
    • 2017-09-02
    相关资源
    最近更新 更多