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

Question

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

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

另外，我有 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 list 中的 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 应用程序知道哪些 Assets 应该适本地缩小、丑化和预处理成适当的文件以用于生产。您可以阅读更多关于 rails/sprockets 在为您进行 Assets 预编译自动化方面的出色表现 here

编辑 回应您的评论:

您只需要在您的 config.assets.precompile 数组中包含 Assets (js/coffee/css/scss)，这些 Assets 不包含在您的应用程序 list 中并且您计划在您的 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 数组来将它们预编译到它们自己的独立 Assets 文件中。我知道这看起来很困惑，但为生产 Assets 提供服务的目标是将您的文件自动组合成尽可能少的文件，并缩小/丑化/等以提供帮助:

1. 最小化所提供的整体文件大小。
2. 尽量减少对多个 Assets 文件向服务器发出的不必要请求的数量。
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";
}

....

疑难解答:

以下是我对丢失 Assets 进行故障排除的方法。这里的目标是模拟生产中将要发生的事情，但在本地运行:

在开发(本地机器)中，我进入我的 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 目录中看到相应的文件名。如果它不存在，那么您的应用程序/ Assets 文件与您放入 config.assets.precompile 列表的目录结构不匹配。

另外，你用什么来部署，capistrano？ (我可能应该先问这个:)当你说:

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

您如何引用 bootstrap/bootstrap.min.css？