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

【问题标题】：My rails stylesheets are not loading/working我的 Rails 样式表没有加载/工作
【发布时间】：2023-03-28 16:00:02
【问题描述】：

自从我在 Rails 中开发以来已经有一段时间了，我无法让任何 scss 样式表在我新创建的 Rails 应用程序上工作。

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，但它什么也没做。有人能解释一下它的作用吗？

我尝试将*= require main 和*= require main.scss 添加到application.scss。我什至将两个文件的文件 ext 更改为 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
 */

仍然没有任何效果

【问题讨论】：

标签： css ruby-on-rails ruby-on-rails-4

【解决方案1】：

 /*
 *= require_tree .
 *= require_self
 */

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

【讨论】：

您能解释一下为什么这将有助于解决问题吗？
require_tree 指令告诉 Sprockets 递归地将指定目录中的所有 JavaScript 文件包含到输出中。这会将文件中包含的 CSS（如果有）放在 require_self 调用的精确位置。

【解决方案2】：

看起来我可以让它工作的唯一方法是将@import main;添加到application.scss。看起来样式最终会在每个页面上使用（这是 rails 中的默认设置吗？）。

这不是我理想的解决方案，但这是我能够通过要求方法使任何样式生效的唯一方法。

【讨论】：

【解决方案3】：

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

hope this helps

【讨论】：

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

【解决方案4】：

我无法得到上述答案，但我想我找到了一个简单的解决方法，可以让 Rails 以预期的方式运行。

在您的 HEAD 部分添加

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

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

遗憾的是，您仍然需要预先编译。呸。

【讨论】：

【解决方案5】：

我认为 application.scss 文件应该抓取所有它的文件夹和子文件夹中的样式表，但不是。（奇怪的是， .js 文件加载得很好。）

通过将*= require_tree . 添加到 application.scss 我认为它应该像您期望的那样递归地加载所有文件。

【讨论】：

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

【解决方案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";

您还需要通过这种方式包含各种 gem 样式表：

@import "bootstrap";

您不应该有 application.css 文件 - 如果您创建了一个，请将其删除。

递归地包含样式表是一种不好的做法，因为顺序确实很重要，并且冲突的样式会级联，从而相互破坏。我没有回答你关于递归的问题，因为自从升级到 Rails 4 后我就没有这样做过

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

在我使用 Rails 6 的情况下，无法在生产环境 (Heroku) 中加载来自 app/javascript/stylesheets 的样式。这些样式仅在开发中工作。

所以我在 Gemfile 中添加这个 gem 并安装它。

gem 'jquery-rails'

然后我的应用可以在开发和生产环境中加载样式。

【讨论】：