Question

使用Rails 3.2.1

我使用以下命令创建了一个名为Home的简单控制器：

rails g controller Home index

它为我创建了一个新的控制器和视图：

enter image description here

注意有两个样式表，一个是“应用程序”，另一个是“主页”。我找不到任何文档来支持这个假设，但我猜你把样式只应用于Home.css.scss文件中的“Home”视图，对吗？

因此，作为测试，我在Application.css.scss.erb中添加了一些全局样式并运行了应用程序。

按预期应用样式。

接下来，我在Home.css.scss文件中添加了一些规则，并访问了“Home / index”视图，但该文件中的样式未附加，也未作为单独的CSS参考链接，甚至附加到单个Application.css.scss文件。这对我来说非常困惑，因为评论说：

// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

为什么Home.css.scss中编写的规则不适用于我的网站？

Answer 1

它可以这样工作，马雷克是非常正确的，答案在指南中。在introduction to section 2.1：

例如，如果您生成ProjectsController，则Rails还会在app/assets/javascripts/projects.js.coffee添加新文件，在app/assets/stylesheets/projects.css.scss添加新文件。您应该将任何JavaScript或CSS唯一的控件放在各自的资产文件中，因为这些文件只能通过<%= javascript_include_tag params[:controller] %>或<%= stylesheet_link_tag params[:controller] %>等行加载到这些控制器。

因此，要将应用程序设置为加载控制器特定的样式表：

首先，通过删除application.css清单中的任何额外要求来禁用所有样式表的默认加载。

通常，您会看到如下条目：

 *= require_tree .

如果您仍想加载一些常见的css文件，可以将它们移动到子目录并执行以下操作：

 *= require_tree ./common

其次，在应用程序的布局中添加建议的stylesheet_link_tag，例如

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= stylesheet_link_tag params[:controller] %>

在此示例中，我们首先加载应用程序css文件，然后加载与当前控制器名称匹配的任何css文件。

Answer 2

我用一个简单的解决方案解决了这个问题。我将控制器名称添加到body作为类，编辑views/layouts/application.html.slim：

body class=controller.controller_name

或views/layouts/application.html.erb：

<body class="<%= controller.controller_name%>">

然后在我的CSS中我只使用body.controller_name作为名称空间：

/* example for /users/ */

body.users {
    color: #000;
}

body.users a {
    text-decoration: none;
}

对于小型项目，我认为没问题。

Answer 3

我不认为它的工作方式（Home.css仅适用于Home控制器操作）。不同的文件仅用于分离，以便更清楚地描述什么是CSS规则。您可以阅读有关资产管道的guide。我猜你改变了默认application.css.scss并删除了从app/assets/stylesheets导入所有CSS文件的行。

Answer 4

<强> TL; DR：

忽略评论，这不是Sass提出的。但是把： @import "*"; 进入你的application.css.scss文件，它将自动导入所有控制器scss文件。

完整阅读：

免责声明：这是我目前对使用和不使用Sass的资产管道流程的理解。

我认为这个评论是由标准的Rails Asset管道（链轮）编写的，而不是由Sass编写的：

// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

标准管道将处理scss文件，但不会假定 application.css。 scss 文件。但是如果您使用Sass创建这样的文件，那么Sass会将其编译为 application.css 文件。

如果您使用普通的Rails资产管道而不使用Sass，则sprockets会自动将css文件加载到 application.css 文件中（如果该文件具有默认的*= require_tree .行它）。

当您使用Sass时，使用 application.css。 scss 文件，Sass会将此文件编译为 application.css 文件。（我假设它会覆盖或优先于你已经拥有的任何application.css文件。）

要自动包含 home.css.scss 文件（和其他控制器文件），请将此行放入 application.css.scss 文件中：

@import "*";

供参考，请参阅此问题： Is it possible to import a whole directory in sass using @import?

如何在Rails 3.2.1中使用特定于控制器的样式表？

4 个答案: