Question

我在我的rails应用程序中使用bootstrap-sass工作正常，但是一个特定的页面，欢迎＆＃39;我希望身体有不同的颜色。

如果我打开资产中的welcome.scss文件并添加

html, body {background:#000000;}

我没有变化，引导白色会覆盖我期望发生的变化。

如何更改该页面。

我的理解是页面css只在你进入该页面时加载 - 我错了，它是否与在Application.scss文件中写入一样？

Answer 1

据我了解，页面css仅在您访问该页面时加载

加载的CSS完全依赖依赖layout中的stylesheet_link_tag：

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>

加载它的方式决定了加载每个页面的样式表。

-

例如，加载样式表的标准Rails方法是使用"sprockets" files & directives将所需文件附加到application.css表单中。虽然这适用于任何其他工作表，但它主要与application一起使用。

由于您使用的是bootstrap（告诉您the following）：

#app/assets/stylesheets/application.css
/*
 *= require bootstrap_and_overrides
*/

...您需要确保知道要加载哪些文件。具体来说，您加载特定于页面的CSS的断言是错误的;你要么加载硬编码，要么把代码放到一个文件中（EG应用程序）：

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application, controller_name #=> loads controller CSS page each time you load a new controller %>

-

对你而言，我会做以下事情：

#app/views/layouts/application.html.erb
<body class="welcome if action_name == 'welcome'">

然后你就可以使用以下内容：

#app/assets/stylesheets/application.css
body.welcome {background:#000000;}

Answer 2

如果您想为特定控制器或操作自定义样式，可以按照以下步骤操作：

将控制器名称/操作名称（如果需要）添加到布局文件中，application.html.erb在我的示例中：

<!DOCTYPE html>
<html>
  <head>
    <!-- My header template -->
  </head>
  <body class="<%= controller_name %>_body action_<%= action_name %>">
    <!-- My body template -->
  </body>
</html>

在合适的文件中添加css。例如：controler_name ='home'，action ='index'。所以我的css将是（请注意，我在这里不使用action ='index'，在你的情况下可能需要它）

body {
   background: NORMAL_COLOR;
   &.home-body {
     background: SPECIAL_COLOR;
   }
}

Answer 3

如果您只在该特定页面中加载该css个文件，则该文件仅适用于该页面。否则它将适用于所有页面。简而言之，它与Application.scss中的写作相同。

css类的应用顺序与您在声明它们时定义的顺序相同。因此，要应用welcome.scss，您需要在bootstrap css文件之后声明它。

此外，您可以使用!important

这是您在<head>部分中定义特定于页面的css文件的方法：

在application.html.erb中，您可以定义

<% if content_for?(:head) %>
    <%= yield(:head) %>
<% else %>
    # default css file
<% end %>

在您的页面（此特定实例的welcome页面）中，您可以像这样定义相应的css文件：

<% content_for :head do %>
     <link rel="stylesheet" href="/assets/welcome.scss">
<% end %>

希望它有所帮助！

根据页面轨道更改正文背景

3 个答案: