为什么我的 rails 应用程序中的基本 css 无法加载?

Why won't my basic css in my rails app load?

您好,我在 css 基本 rails 应用程序中加载时遇到问题。我做到了 rails g controller static_pages 这给了我一个 static_pages.scss ,默认情况下应该由资产管道加载,对吧?我有 require_tree 。在我的 application.css 文件中:

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

 */

这是我的 static_pages.scss 文件:

// Place all the styles related to the static_pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

body {
  background-color: red;
}

当我查看 static_pages#home 页面时,背景是白色的,所以 css 没有加载。

这是我的 application.html.erb:

<!DOCTYPE html>
<html>
<head>
  <title>t</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
<body class="container-fluid">

  <%= yield %>

</body>
</html>

我没有对应用程序进行任何配置更改。感谢您的帮助。

尝试以下方法,因为我得到红色背景;

static_pages_controller.rb

class StaticPagesController < ApplicationController
end

routes.rb

Rails.application.routes.draw do

  root 'static_pages#home'

end

home.html.erb

static_pages.scss

// Place all the styles related to the static_pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
body {
  background-color: red;
}

application.html.erb

 <!DOCTYPE html>
<html>
<head>
  <title>Apple</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

application.css

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

希望对您有所帮助!!!