我的Rails样式表没有加载/工作

Question

我已经有一段时间没有在Rails中进行开发了，我在刚创建的Rails应用程序中遇到了无法使任何scss样式表起作用的问题。

layouts/application.html.erb顶部有默认的<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>。

为了测试目的，我在assets/stylesheets/中创建了一个名为main.scss的文件，其内容如下：

* {
border: 1px solid black;
}

我以为application.scss文件应该抓取其文件夹及其子文件夹中的所有样式表，但实际上并没有。 （奇怪的是，.js文件可以正常加载。）

我尝试过RAILS_ENV=production rake assets:precompile，但它什么也没做。有人能解释一下它究竟是做什么的吗？

我尝试在application.scss中添加* = require main和* = require main.scss。 我甚至将这两个文件的扩展名更改为css。我得到任何CSS渲染的唯一方法是直接将代码添加到application.scss中，但我不想这样做。

请帮我解决这个问题。

编辑1

我要添加更多信息，因为我得到了通用的答案。我提到这是一个全新的Rails应用程序，因此基本事项已经预先生成。 这是我的application.scss的样子：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require main
 *= require_self
 */

但是，仍然没有任何作用

- WeerdNoise

Answer 1

 /*
 *= require_tree .
 *= require_self
 */

将以上内容添加到您的application.scss或application.css.scss文件中。

- Soumitra Sarkar

---

你能解释一下为什么这会有助于解决问题吗？ - CertainPerformance

require_tree指令告诉Sprockets递归地将指定目录中的所有JavaScript文件包含到输出中。这将把文件中包含的CSS（如果有）放置在require_self调用的精确位置。 - Soumitra Sarkar

Answer 2

看起来唯一能让它工作的方法是在 `application.scss` 中添加 `@import main;`。似乎这些样式最终会在每个页面上使用（这是 Rails 中的默认值吗？）。

这不是我的理想解决方案，但这是我能够通过 require 方法使任何样式起作用的唯一方法。

- WeerdNoise

Answer 3

in your application.css, try adding 
    *= require main
    *= require_self

hope this helps

- noman tayyab

---

我在上面打错了一个字。实际上我尝试的是 *= require main，而不是 *= main。 - WeerdNoise

Answer 4

我无法让上述答案起作用，但我认为我找到了一个简单的解决方法，可以使Rails按照预期的方式运行。

在您的HEAD部分中添加以下内容：

<%= stylesheet_link_tag    params["controller"], media: 'screen' %>

现在app/assets/stylesheets/中的css/SASS/Scss文件将会被加载。

不幸的是，你仍然需要预编译这些文件。Grr。

- RalphShnelvar

Answer 5

我认为application.scss文件应该获取其文件夹和子文件夹中的所有样式表，但实际上并没有这样做。（奇怪的是，.js文件可以正常加载。）通过在application.scss中添加*= require_tree .，我认为它应该像您期望的那样递归加载所有文件。

- hypern

---

这是在新的Rails应用程序中的默认设置。这就是为什么我认为它应该工作的原因。 - WeerdNoise

Answer 6

在使用Rails 4时：

确保你的Gemfile文件中使用了sass-rails gem。

# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'

你已经创建了 app/assets/stylesheets/main.scss，太好了！

现在更新 application.scss 来包含它：

@import "main";

你还需要以这种方式包含各种宝石样式表：

@import "bootstrap";

你不应该有一个application.css文件——如果你有的话，就删除它。

递归包含样式表是一种不好的做法，因为顺序很重要，而冲突的样式将会级联，从而相互覆盖。我对你关于递归的问题没有答案，因为自从升级到Rails 4以后，我就没做过这个。

- isunktheship

Answer 7

对我来说，这是解决方案 将CSS文件链接到您的根目录 还要确保您的application.html.erb文件有这一行：

<%= stylesheet_link_tag 'application', media: 'all' %>

- nourza

Answer 8

在我的Rails 6项目中，app/javascript/stylesheets文件夹下的样式表在生产环境（Heroku）中无法加载，只有在开发环境下才能正常工作。

因此，我在Gemfile中添加了以下代码并进行了安装：

gem 'jquery-rails'

这样一来，我的应用程序就可以在开发和生产环境下都能够正确加载样式表了。

- ahartami