CODEWITHSUNDEEP
ruby-on-railsasset-pipeline
srlrs20020
srlrs20020

Reputation: 447

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

Hi I'm having trouble getting my css to load in my basic rails app. I did rails g controller static_pages This gave me a static_pages.scss which should be loaded by the asset pipeline by default right? I have require_tree . in my application.css file:

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

 */

Here is my static_pages.scss file:

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

And when I view the static_pages#home page the background is white, so the css is not loading.

And here is my 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>

I haven't made any configuration changes to the application. Thanks for the help.

Upvotes: 0

Views: 673

Answers (1)

Muhammad Yaseen
Muhammad Yaseen

Reputation: 371

Try this way as below as I am getting the red background;

static_pages_controller.rb

class StaticPagesController < ApplicationController
end

routes.rb

Rails.application.routes.draw do

  root 'static_pages#home'

end

home.html.erb

screenshot.png

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

Hope it helps!!!

Upvotes: 1

Related Questions