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

发布于 2025-01-04 12:29:35 字数 789 浏览 1 评论 0原文

使用 Rails 3.2.1，

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

rails g controller Home index

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

enter image description here

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

因此，作为测试，我向 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 中编写的规则没有应用于我的网站？

原文

Using Rails 3.2.1

I created a simple controller called Home using the command:

rails g controller Home index

And it created a new controller and view for me:

enter image description here

Notice how there are two stylesheets, one "Application" and one "Home". I can't find any documentation to support this assumption but I'm guessing you put styles that will only be applied to the "Home" views, in the Home.css.scss file, correct?

So as a test, I added in some global styles to Application.css.scss.erb and ran the application.

The styles applied as expected.

Next, I added in some rules to the Home.css.scss file and I visited a "Home/index" view, yet the style in that file wasn't attached, neither as a seperate CSS reference link, or even appended to the single Application.css.scss file. This is highly confusing to me, since the comments say:

// 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/

Why aren't the rules written in Home.css.scss applied to my website?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

万人眼中万个我 2025-01-11 12:29:35

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

It can work this way and Marek is quite correct, the answer is in the guide.
In the introduction to section 2.1:

For example, if you generate a ProjectsController, Rails will also add a new file at app/assets/javascripts/projects.js.coffee and another at app/assets/stylesheets/projects.css.scss. You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.

So to set your application up to load controller specific stylesheets:

First, disable the default loading of all stylesheets by removing any extra requires in the application.css manifest.

Typically you'll see an entry like this:

 *= require_tree .

If you still want to load some common css files, you can move them to a subdirectory and do something like this:

 *= require_tree ./common

Second, In your application's layout add the suggested stylesheet_link_tag eg

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

In this example we first load the application css file, we then load any css file that matches the current controller name.

回复收藏 0 原文

野侃 2025-01-11 12:29:35

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

body class=controller.controller_name

或 views/layouts/application.html.erb< /code>：

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

然后在我的 css 中，我只使用 body.controller_name 作为命名空间：

/* example for /users/ */

body.users {
    color: #000;
}

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

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

I've solved this problem with a simple solution. I add to body the controller name as a class, editing views/layouts/application.html.slim:

body class=controller.controller_name

Or views/layouts/application.html.erb:

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

And then in my css I just use body.controller_name as a namespace:

/* example for /users/ */

body.users {
    color: #000;
}

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

For small projects I think it's fine.

回复收藏 0 原文

祁梦 2025-01-11 12:29:35

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

回复收藏 0 原文

紫﹏色ふ单纯 2025-01-11 12:29:35

TL;DR:

忽略该评论，它不是 Sass 做出的。但放：
@import "*";
到您的 application.css.scss 文件中，它将自动导入所有控制器 scss 文件。

完整阅读：

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

我认为此评论是由标准 Rails Asset 管道（sprockets）编写的，而不是由 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< /strong> 文件。但是如果您使用 Sass 创建这样的文件，那么 Sass 会将其编译为 application.css 文件。

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

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

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

@import "*";

作为参考，请参阅此问题:
是否可以导入整个目录在 sass 中使用@import？

TL;DR:

Ignore the comment, it's not made by Sass. But put:
@import "*";
into your application.css.scss file, and it will automatically import all the controller scss files.

Full read:

Disclaimer: This is my current understanding of the asset pipeline flow with and without Sass.

I think this comment is written by the standard Rails Asset pipeline (sprockets), and not by 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/

The standard pipeline will handle scss files but doesn't presume an application.css.scss file. But if you create such a file with Sass, then Sass will compile it to the application.css file.

If you use the normal Rails asset pipeline, without Sass, then sprockets would load the css file into the application.css file automatically (if that file has the default *= require_tree . line in it).

When you use Sass, with an application.css.scss file, Sass will compile this file into a application.css file. (I assume it would overwrite or take precedence over any application.css file you already had).

To get your home.css.scss file (and other controller files) automatically included, put this line into your application.css.scss file: