CSS 如何在 Rails 3.2.1 中使用控制器特定的样式表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9245228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use Controller specific stylesheets in Rails 3.2.1?
提问by Only Bolivian Here
Using Rails 3.2.1
使用 Rails 3.2.1
I created a simple controller called Home using the command:
我使用以下命令创建了一个名为 Home 的简单控制器：
rails g controller Home index
And it created a new controller and view for me:
它为我创建了一个新的控制器和视图：
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?
请注意有两个样式表，一个“应用程序”和一个“主页”。我找不到任何文档来支持这个假设，但我猜你把只应用于“主页”视图的样式放在 Home.css.scss 文件中，对吗？
So as a test, I added in some global styles to Application.css.scss.erb and ran the application.
所以作为测试，我在 Application.css.scss.erb 中添加了一些全局样式并运行了应用程序。
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:
接下来，我在 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/
Why aren't the rules written in Home.css.scss applied to my website?
为什么 Home.css.scss 中编写的规则不适用于我的网站？
采纳答案by Marek Sapota
I don't think it works that way (Home.cssbeing applied only to Homecontroller actions). The different files are just for separation, to make it clearer what are the CSS rules describing. You can read this guideabout the asset pipeline. I'm guessing you altered the default application.css.scssand removed the line importing all CSS files from app/assets/stylesheets.
我不认为它是这样工作的（Home.css仅适用于Home控制器操作）。不同的文件只是为了分离，以便更清楚地描述 CSS 规则是什么。您可以阅读有关资产管道的本指南。我猜你改变了默认值application.css.scss并删除了从 .css 文件导入所有 CSS 文件的行app/assets/stylesheets。
回答by benz001
It can work this way and Marek is quite correct, the answer is in the guide. In the introduction to section 2.1:
它可以这样工作，Marek 是非常正确的，答案在指南中。在第 2.1 节的介绍中：
For example, if you generate a
ProjectsController, Rails will also add a new file atapp/assets/javascripts/projects.js.coffeeand another atapp/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] %>.
例如，如果您生成一个
ProjectsController，Rails 还会添加一个新文件 atapp/assets/javascripts/projects.js.coffee和另一个 atapp/assets/stylesheets/projects.css.scss。您应该将控制器独有的任何 JavaScript 或 CSS 放入其各自的资产文件中，因为这些文件可以仅为这些控制器加载，例如<%= javascript_include_tag params[:controller] %>或<%= 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.
首先，通过删除 application.css 清单中的任何额外要求来禁用所有样式表的默认加载。
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:
如果你仍然想加载一些常见的 css 文件，你可以将它们移动到一个子目录并执行如下操作：
*= require_tree ./common
Second, In your application's layout add the suggested stylesheet_link_tag eg
其次，在您的应用程序布局中添加建议的 stylesheet_link_tag 例如
<%= 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.
在本例中，我们首先加载应用程序 css 文件，然后加载与当前控制器名称匹配的任何 css 文件。
回答by franzlorenzon
I've solved this problem with a simple solution. I add to bodythe controller name as a class, editing views/layouts/application.html.slim:
我已经用一个简单的解决方案解决了这个问题。我添加到body控制器名称作为一个类，编辑views/layouts/application.html.slim：
body class=controller.controller_name
Or views/layouts/application.html.erb:
或者views/layouts/application.html.erb：
<body class="<%= controller.controller_name%>">
And then in my css I just use body.controller_nameas a namespace:
然后在我的 css 中，我只是body.controller_name用作命名空间：
/* example for /users/ */
body.users {
color: #000;
}
body.users a {
text-decoration: none;
}
For small projects I think it's fine.
对于小项目，我认为这很好。
回答by Magne
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.
忽略评论，它不是由 Sass 制作的。但是将：
@import "*";放入您的 application.css.scss 文件中，它会自动导入所有控制器 scss 文件。
Full read:
完整阅读：
Disclaimer: This is my current understanding of the asset pipeline flow with and without Sass.
免责声明：这是我目前对使用和不使用 Sass 的资产管道流程的理解。
I think this comment is written by the standard Rails Asset pipeline (sprockets), and not by Sass:
我认为此评论是由标准 Rails 资产管道（链轮）编写的，而不是由 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.scssfile. But if you create such a file with Sass, then Sass will compile it to the application.cssfile.
标准管道将处理 scss 文件，但不假定application.css。.scss文件。但是如果你用 Sass 创建了这样一个文件，那么 Sass 会将它编译成application.css文件。
If you use the normal Rails asset pipeline, without Sass, then sprockets would load the css file into the application.cssfile automatically (if that file has the default *= require_tree .line in it).
如果您使用普通的 Rails 资产管道，而没有 Sass，那么 sprockets 会自动将 css 文件加载到application.css文件中（如果该文件中有默认*= require_tree .行）。
When you use Sass, with an application.css.scssfile, Sass will compile this file into a application.cssfile. (I assume it would overwrite or take precedence over any application.css file you already had).
当你使用 Sass 时，带有一个application.css。scss文件，Sass 会将此文件编译为application.css文件。（我认为它会覆盖或优先于您已有的任何 application.css 文件）。
To get your home.css.scssfile (and other controller files) automatically included, put this line into your application.css.scssfile:
要自动包含home.css.scss文件（和其他控制器文件），请将此行放入application.css.scss文件中：
@import "*";
For reference, see this question: Is it possible to import a whole directory in sass using @import?
作为参考，请参阅此问题： Is it possible to import a entire directory in sass using @import?
