根据rails 4中的页面显示不同的样式表

Question

我正在尝试根据页面呈现不同的 CSS。我做了一些研究 How does one load a CSS framework in Rails 3.1? https://github.com/rails/rails/issues/1981 当然还有资产管道上的 Rails 指南。 我想要的是索引（主页）呈现一个css文件（welcome.css.scss）和其他呈现users.css.scss。

现在，当您导航到页面时，它会呈现welcome.css.scss，然后当我点击登录时，它仍然会呈现welcome.css.scss。但是在刷新页面后它会渲染 user.css.scss

我更新了 assets.rb 文件：

Rails.application.config.assets.precompile += %w( welcome.css )
Rails.application.config.assets.precompile += %w( users.css )

然后我创建了一个welcome.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Blocmarks</title>
    <%= stylesheet_link_tag    "welcome" %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>  
    <%= yield %>
  </body>
</html>

还有一个 users.html.erb 文件

<!DOCTYPE html>
<html>
  <head>
    <title>Blocmarks</title>
    <%= stylesheet_link_tag    'users' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

我从 application.css.scss 中删除了要求。此时文件中唯一的就是@import 'bootstrap'； 当然，我有一个欢迎和 user.css.scss。

来自控制台的结果： - 导航到主页

Started GET "/" for 127.0.0.1 at 2014-10-25 13:04:11 -0500
  ActiveRecord::SchemaMigration Load (0.3ms)  SELECT "schema_migrations".* FROM "schema_migrations"
Processing by WelcomeController#index as HTML
  Rendered welcome/index.html.erb within layouts/welcome (13.0ms)
Completed 200 OK in 471ms (Views: 446.7ms | ActiveRecord: 0.0ms)

导航到用户/登录

Started GET "/users/sign_up" for 127.0.0.1 at 2014-10-25 13:04:57 -0500
Processing by Devise::RegistrationsController#new as HTML
  Rendered devise/shared/_links.erb (2.7ms)
  Rendered devise/registrations/new.html.erb within layouts/devise (615.4ms)
Completed 200 OK in 896ms (Views: 890.9ms | ActiveRecord: 0.9ms)

刷新用户/签名页面：

Started GET "/users/sign_up" for 127.0.0.1 at 2014-10-25 13:06:02 -0500
Processing by Devise::RegistrationsController#new as HTML
  Rendered devise/shared/_links.erb (0.8ms)
  Rendered devise/registrations/new.html.erb within layouts/devise (7.4ms)
Completed 200 OK in 308ms (Views: 306.3ms | ActiveRecord: 0.0ms)

我还创建了一个包含完整控制台结果的要点，以显示它首先获得了什么： https://gist.github.com/tjperry07/b3093c0b7f16b5e000b0

Answer 1

这是因为rails turbolinks 而发生的。 它使您的网络应用程序中的链接更快。它不会让浏览器在每个页面更改之间重新编译 JavaScript 和 CSS，而是保持当前页面实例处于活动状态并仅替换头部中的正文和标题。

如果您查看guides 或turbolinks docs。上面写的很清楚

如果使用 Rails 4 中默认包含的 turbolinks gem，则包含“data-turbolinks-track”选项，该选项会导致 turbolinks 检查资产是否已更新，如果已更新，则将其加载到页面中

修复：

用这些替换你的样式表标签：

<%= stylesheet_link_tag "welcome", media: "all", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag "users", media: "all", "data-turbolinks-track" => true %>