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文件。

修改的

根据迈克的建议，我已将以下内容添加到我的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应用程序知道哪些资产可以正确缩小，uglify和预处理到适当的文件进行生产。您可以阅读更多有关如何为您进行资产预编译自动化的强大rails /链接器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" %>

OR

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

然后，您必须通过将这些文件添加到config.assets.precompile数组，让他们知道将这些文件预先编译为他们自己的单独资产文件。我知道这看起来很混乱，但提供生产资产的目标是将文件自动合并到尽可能少的文件中并缩小/ uglify / etc以帮助：

最小化所提供的整体文件大小。
最大限度地减少多个资产文件对服务器的不必要请求数。
修改以促进缓存清除。

如果您需要更详细的解释，请告诉我们！否则，请将此视为已接受的答案。

至于字体，这就是我的工作：

创建目录app / assets / fonts，并将所有字体文件放入那里。
在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";
}

....

<强>疑难解答：

以下是我如何解决丢失的资产问题。这里的目标是模拟生产中会发生什么，但是在本地运行：

# ...(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的？

Rails 3.2 Asset Pipeline + Custom Theme + Bootstrap

1 个答案: