How to style a static page in rails 4 app

Question

I want to style a static page to be as a landing page for the rails app. The static page is from the StaticPagesController. But the problem is when I add the class in the static page (home.html.erb) and in the application.css add the styling it doesn't use the styles. Any suggestions?

Answer 1

Rename the application.css to application.scss because for rails 4 is better to work with .scss extension.

Then, DON'T write your code directly in your application.scss file, is a really bad practice.

Import your .scss files (without the extension) For example:

*= require_tree .
 = require rails_bootstrap_forms
 *= require_self
*/

@import "yourfilename";

If you are using .sass extension, then you must include this line in your config/application.rb file:

config.sass.preferred_syntax = :sass

This is because rails takes by default .css or .scss extension instead of .sass extension.

If you deleted the content of the application.scss you have to restore it too.

Answer 2

This should be the file. \app\views\layouts\application.html.erb

You can add link to your stylesheet in the head section.

or

You can @include your custom css file into application.css file which should be located at \app\assets\stylesheets\