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 文件中列出的任何内容。诀窍是通过以下两种方式之一获取 jquery.datatables.css 的副本：

1) 在您的 RoR 应用程序中实现一个默认的 dataTables 表；在浏览器中查看源代码；单击 jquery.datatables.css 链接并复制+粘贴到您的编辑器中；或者

2）下载DataTables的最新标准（非rails）发行版，在DataTables -xxx/media/css/jquery.datatables.css下找到jquery.datatables.css的副本。

通过替换修改您的 application.css 文件

*= require dataTables/jquery.dataTables

和

*= require jquery.dataTables

现在您可以自由修改 jquery.datatables.css 的本地副本以满足您的需要。确保将其保存在 Sprockets 将搜索的两个位置之一（./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 与文件的实际位置一致。如果我在这里找到 Sprockets 和其他样式表（给定 application.css 中的正确行），Sprockets 也会找到 jquery.datatables.css：

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

尽管!important最初使用 css 标志可以让我完成我希望的事情，但即使在短期内，用标志洒在我的代码上也会变得难以管理。在几个小时的搜索中，我从未设法找到为 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.

更新：

如果这不起作用，我认为你的 css 会有一些!important，像这样：

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

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