Rails 4：如何从特定视图中排除 CSS 文件？答案

【问题标题】：Rails 4: How to exclude a CSS file from a specific view?Rails 4：如何从特定视图中排除 CSS 文件？
【发布时间】：2016-01-15 05:23:03
【问题描述】：

如何从特定视图 (home.html.erb) 中排除特定的 CSS 文件 (custom.css.scss)？

以下场景。我的 rails 应用程序由必须登录才能查看的实际 Web 应用程序和向外的登录页面组成。

Web 应用程序的 CSS 位于名为 custom.css.scss 的文件中。

对于登录页面，我创建了一个名为 static_pages.css.scss 的新 CSS 文件。

现在，问题显然是 Rails 引入了所有样式表并将它们应用于所有视图：

*= require_tree . *= require_self

但是，现在我的登录页面被包含应用特定 CSS 的 custom.css.scss 文件弄乱了，反之亦然。

由于我的登陆页面只是一个单页页面，理想的解决方案是从代表登陆页面的 home.html.erb 文件中简单地排除 custom.css.scss。

我怎样才能做到这一点？

我找到了关于这个问题的各种主题，但无法理解它。有些看起来只是注入，有些看起来要排除。

非常感谢您的帮助。

【问题讨论】：

在您的主页上编写 HTML，使自定义 CSS 不适用。

标签： css ruby-on-rails ruby-on-rails-4

【解决方案1】：

在您的模板中找到这种行：

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

它确实很神奇，custom 和 static css 都包含在 application.css 中

排除某些东西很奇怪，对于css我们通常使用选择器来识别哪些元素会生效。

我的建议是：

添加标识控制器/动作的特定类/ID 例如，我将这种代码添加到我的布局模板中：

<body id="<%= controller_name %>_body">

所以现在每个视图都有 id 作为它的主体

修改自定义 css 以适用于除登录页面之外的所有内容。例如，我的登录页面有正文 id：landing_page_body

在custom.css.scss

body:not(#landing_page_body) {
  // My css here apply for all except for #landing_page_body
}

【讨论】：

【解决方案2】：

如果您想在每个页面上包含特定样式表，则必须单独创建和编译它，并根据需要调用它：

#config/initializers/assets.rb

#app/assets/stylesheets/application.css
/* 
  *= require_tree .
  *= require self
  *= stub custom
*/

#app/assets/stylsheets/custom.css
...

这将允许您指定何时调用样式表：

#app/views/layouts/application.html
<%= stylesheet_link_tag :application, (:custom if controller_name != "landing") %>

如果您不使用登陆控制器，这只会加载custom 样式表。

【讨论】：