Question

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

以下方案。我的rails应用程序由实际的Web应用程序组成，用户必须登录才能看到它以及面向外部的登录页面。

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

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

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

*= require_tree . *= require_self

但是，现在我的登录页面被custom.css.scss文件搞砸了，该文件包含特定于应用程序的CSS，反之亦然。

由于我的目标网页只是一个页面，因此理想的解决方案是从我的home.html.erb文件中排除custom.css.scss，该文件代表着陆页。

我怎样才能做到这一点？

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

非常感谢帮助。

Answer 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
}

Answer 2

如果您想在每页的基础上添加特定的样式表，则必须创建＆amp;单独编译，根据需要调用它：

#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样式表。

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

2 个答案: