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

ruby-on-rails- CSS

小胖TonyLEY

2020-03-23

使用Rails 3.2.1

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

rails g controller Home index

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

在此处输入图片说明

注意如何有两个样式表，一个是“ Application”，一个是“ Home”。我找不到任何支持该假设的文档，但是我猜您在Home.css.scss文件中放置了仅应用于“主页”视图的样式，对吗？

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

样式已按预期应用。

接下来，我在Home.css.scss文件中添加了一些规则，并访问了“主页/索引”视图，但是该文件中的样式没有附加，既没有作为单独的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中编写的规则没有应用于我的网站？

第2928篇《如何在Rails 3.2.1中使用控制器特定的样式表？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
Stafan小小 2020.03.23

我不认为这种方式有效（Home.css仅适用于Home控制器动作）。不同的文件只是为了分开，以使CSS规则描述的内容更清楚。您可以阅读有关资产管道的本指南。我猜您已更改默认设置，application.css.scss并删除了从中导入所有CSS文件的行app/assets/stylesheets。

小胖 2020.03.23

我已经通过一个简单的解决方案解决了这个问题。我将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;
}

对于小型项目，我认为很好。

Itachi 2020.03.23

它可以这样工作，Marek是非常正确的，答案在指南中。在第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文件。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android