css - Rails 4 应用程序在开发和生产之间在视觉上有所不同

Question

我在 Centos 机器上部署了一个 Rails 4 应用程序。虽然一切看起来都很好，但它看起来与我的开发实例略有不同，因为一切都更宽一些，字体等也不太清晰。任何 Assets 似乎都没有任何问题 - 例如，当我使用 chrome 开发工具时，没有显示任何错误，当我通过 css 上的“检查元素”进行比较时，两个实例完全相同。我看到的唯一区别是生产中的主体宽度比开发中的宽(在我当前的屏幕上为 2114 像素对 1903 像素)。该应用程序使用 bootstrap 3 并加载了自定义主题，正如我所说，它们似乎都可以很好地迁移到生产实例。

我不太确定在这一点上应该在哪里查看造成差异的地方(也不知道要提供哪些文件作为帮助)，但我真的很想解决这个问题，因为生产版本看起来有点笨拙.有人有什么想法吗？

提前致谢

Answer 1

现在您的样式表正在按以下顺序呈现:Jquery UI -> Bootstrap 3.2 -> Bootswatch 3.2 -> Jasney Bootstrap 3.1

您的自定义 Bootswatch 主题具有与覆盖的传统 Bootstrap 无衬线字体(“Helvetica Neue”、Helvetica、Arial、sans-serif)不同的默认正文字体(Georgia、“Times New Roman”、Times、serif)你 Bootstrap 并使字体看起来像打印风格的字体。

您的默认 .container 类也会发生同样的情况。自定义 bootswatch .container 宽度大于默认的 bootstrap .container 类。

我猜你的 bootswatch 库没有加载到你的本地机器上或者在 Bootstrap 之前加载。所以你看到的是所有默认的 Bootstrap 主题(我认为这看起来更好)。然后，当您投入生产时，bootswatch 主题将在 Bootstrap 之后加载，因此会覆盖您在本地机器上看到的所有漂亮的 Bootstrap 默认值。

如果您仍然对它们加载的顺序有疑问，请尝试在您的应用程序/样式表中创建一个 css list 文件，将(如果它们不存在)您的所有 css 库移动到 vendor/assets/stylesheets 中使用此约定分隔文件并在您的 list 文件中调用这些文件:

/*
*= require jqueryui
*= require bootstrap
*= require bootswatch
*= require jasney
*/

通过这种方式，您可以手动订购预编译的 Assets 。它们将按照您在此样式表中包含它们的确切顺序从上到下编译。 **确保在 View 或应用程序/views/layouts/application.html.erb 文件的顶部包含 list 表。 (您可能还需要调整您的 production.rb 文件)

有几个想法，希望这有帮助。