Rails 3.2 Asset Pipeline + 自定义主题 + Bootstrap

Question

希望有人可以帮助我，因为我正在疯狂地阅读/尝试一切以将我的 CSS 文件加载到生产环境中，但它们要么不显示，要么我收到 404 错误。

我的 3.2 RoR 应用混合使用了购买的主题和引导程序。当然，在开发中一切看起来都很棒，但一旦我投入生产，一切都无法正常工作。

另外，我有 2 个布局，application.html.erb 和 homepage.html.erb。 Application.html.erb 调用额外的 CSS，如下所述。

我的 app/assets/stylesheets 目录中有以下内容：

stylesheets
+compiled
 --theme.css #references bootstrap/bootstrap.min.css
 --custom_theme.css  #additional CSS used in application.html.erb
+vendor
 --animate.css
 --brankic.css
+bootstrap
 --bootstrap.min.css
application.css
inbox.css

在我的 application.html.erb 布局中，我明确调用了以下 CSS：

<%= stylesheet_link_tag 'compiled/theme.css', 'vendor/brankic.css', 'vendor/animate.css',  'compiled/custom_theme.css', 'inbox.css' %>

在 homepage.html.erb 布局中，我明确调用了以下 CSS：

 <%= stylesheet_link_tag 'compiled/theme.css', 'vendor/brankic.css', 'vendor/animate.css', 'inbox.css' %>

我尝试过使用 application.css 和 *= require_tree 。但这随后会引入所有内容，并且从主页布局中我不需要custom_theme。如果我创建一个 homepage.css 并省略 custom_theme，我仍然需要放入 *= require_tree 。因为在 theme.css 中有对目录中其他文件的引用。

最后，我尝试在我的 config/env/prod 文件中显式预编译 CSS，但这并没有引入引用的 css 文件。

编辑

根据 Mike 的建议，我已将以下内容添加到我的 config/env/prod 文件中：

config.assets.precompile += ['bootstrap/bootstrap.min.css','compiled/theme.css', 'vendor/brankic.css', 'vendor/animate.css', 'se2b_custom.css', 'inbox.css']

我仍然按上述方式直接调用每个 CSS，但在生产中仍然收到 404 错误。

使用我的主页布局查看页面的源代码，如下所示：

<link href="/assets/bootstrap/bootstrap.min.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/compiled/theme.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/brankic.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/animate.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/inbox.css?body=1" media="screen" rel="stylesheet" type="text/css" />

单击每个链接都会导致 404。

Answer 1

您需要确保将所有未包含在 application.css 清单中的 CSS 文件放入 config/environments/production.rb 中的 config.assets.precompile 列表中：

config.assets.precompile += [  'compiled/theme.css', 'vendor/brankic.css', 'vendor/animate.css',  'compiled/custom_theme.css', 'inbox.css']

这可以让您的 Rails 应用知道哪些资产需要正确地缩小、丑化和预处理到适当的文件中以用于生产。您可以阅读更多关于 rails/sprockets 在为您进行资产预编译自动化方面的出色表现here

编辑回应您的评论：

您只需在 config.assets.precompile 数组中包含 不 包含在您的应用程序清单中和的资产 (js/coffee/css/scss)计划在您的 html/其他地方引用。 Rails 非常擅长在自动生成的文件中记录重要注释，它在 config/environments/production.rb 中说：

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile += %w( compiled/theme.css, vendor/brankic.css, path/to/other_manifest, ....)

重要的部分是 application.js、application.css 和所有非 JS/CSS 都已经添加，这意味着如果你需要这样做：

<%= stylesheet_link_tag "compiled/theme.css" %>

或

<%= javascript_include_tag "a_different/javascript_file.js" %>

然后你必须让 rails 知道将它们 预编译到它们自己的单独资产文件中，方法是将它们添加到 config.assets.precompile 数组中。我知道这可能看起来令人困惑，但提供生产资产的目标是自动将您的文件组合成尽可能少的文件并缩小/丑化/等以提供帮助：

1. 最小化提供的整体文件大小。
2. 尽量减少对您的服务器的多个资产文件的不需要的请求数量。
3. 进行修订以促进缓存清除。

如果您需要更详细的说明，请告诉我！否则将其视为已接受的答案。

至于字体，我是这样做的：

1. 创建目录app/assets/fonts，将所有字体文件放入 在那里。
2. 在 app/assets/stylesheets 中创建/重用一个 css 文件并适当地引用您的字体

例如（app/assets/stylesheets/styles.css）：

@font-face {
  font-family: "CoolIcons";
  // I have put my fonts in app/assets/fonts/cool-icons directory
  src: font-url("cool-icons/cool-icon.eot");
  src: font-url("cool-icons/cool-icon.eot#iefix") format("embedded-opentype"),
  font-url("cool-icons/cool-icon.woff") format("woff"),
  font-url("cool-icons/cool-icon.ttf") format("truetype"),
  font-url("cool-icons/cool-icon.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="cool-icon-"]:before, [class*="cool-icon-"]:before,
[class^="cool-icon-"]:after, [class*="cool-icon-"]:after {   
  font-family: CoolIcons;
}


.cool-icon-books:before {
  content: "\e000";
}

....

疑难解答：

以下是我对丢失资产进行故障排除的方法。这里的目标是模拟生产中会发生什么，但在本地运行：

在开发（本地机器）中，我进入我的 config/database.yml 并添加：

# ...(or equivalent for postgres):
production:
  adapter: mysql2
  encoding: utf8
  reconnect: false
  database: projectname_development
  pool: 5
  username: root
  password:
  socket: /tmp/mysql.sock

从您的终端运行：

#this will precompile your assets as if you were deploying for production
RAILS_ENV=production bundle exec rake assets:precompile

现在导航到您刚刚创建的 public/assets 文件夹，并检查每个文件的内容/名称。不要被文件名末尾的附加字符所淹没，用于缓存清除。

对于您计划在 html 中引用的每个文件，请确保您在新的 public/assets 目录中看到相应的文件名。如果它不存在，那么您的 app/assets 文件与您放在 config.assets.precompile 列表中的目录结构不匹配。

另外，capistrano，你用什么来部署？ （我可能应该先问这个：） 当你说：

stylesheets
+compiled
 --theme.css #references bootstrap/bootstrap.min.css

你是如何引用 bootstrap/bootstrap.min.css 的？