CODEWITHSUNDEEP
cssruby-on-railsruby-on-rails-4
WeerdNoise
WeerdNoise

Reputation: 450

My rails stylesheets are not loading/working

It's been a while since I've developed in Rails and I'm having trouble getting any scss stylesheet to work on my freshly created rails app.

layouts/application.html.erb has the default <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> at the top.

For testing purposes, I created a main.scss file in assets/stylesheets/ that looks like this:

* {
border: 1px solid black;
}

I thought the application.scss file is supposed to grab all the stylesheets in it's folder and child folders but it's not. (Oddly, the .js files load just fine.)

I've tried RAILS_ENV=production rake assets:precompile but it didn't do anything. Could someone explain what it even does?

I've tried adding *= require main and *= require main.scss to application.scss. I even changed the file ext to css for both files. The only way I've gotten any css to render is by directly adding the code to application.scss, which I don't want to do.

Please help me with this.

EDIT 1

I'm going to add some more info since I'm getting generic answers. I mentioned that it's a fresh rails app so the basic things are already pre-generated. This is how my application.scss looks:

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

Still, nothing works

Upvotes: 13

Views: 16242

Answers (8)

ahartami
ahartami

Reputation: 19

In my case with Rails 6, the styles from app/javascript/stylesheets couldn't be loaded in production (Heroku). The styles were only work in development.

So I add this gem in Gemfile and install it.

gem 'jquery-rails'

Then my app can load the styles both in development and production environment.

Upvotes: -2

nourza
nourza

Reputation: 2321

For me this was the solution Is to link css file to your root Also make sure your application.html.erb has this line:

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

Upvotes: 0

Soumitra Sarkar
Soumitra Sarkar

Reputation: 628

 /*
 *= require_tree .
 *= require_self
 */

Add the above to your application.scss or application.css.scss file

Upvotes: 7

RalphShnelvar
RalphShnelvar

Reputation: 607

I could not get the above answers to work but I think I found an easy work-around that makes Rails act the way expected.

In your HEAD section add

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

And now css/SASS/Scss files in app/assets/stylesheets/ will load.

Sadly, you'll still need to precomile things. Grr.

Upvotes: 2

isunktheship
isunktheship

Reputation: 46

When Using Rails 4:

Make sure your Gemfile is using the sass-rails gem

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

You've created app/assets/stylesheets/main.scss, great!

Now update application.scss to include it:

@import "main";

You'll also need to include various gem stylesheets this way too:

@import "bootstrap";

You shouldn't have an application.css file - if you made one, remove it.

It's a bad practice to include stylesheets recursively, since order does matter, and conflicting styles will cascade, thus clobbering each other. I don't have an answer to your question on recursion, since it's not something I've done since upgrading to Rails 4

Upvotes: 0

WeerdNoise
WeerdNoise

Reputation: 450

Looks like the only way I can get it to work is by adding @import main; to application.scss. It seems like the styles end up being used on every page (is this the default in rails?).

This is not my ideal solution but it's the only thing I've been able to do to get any styles to work via requiring methods.

Upvotes: 3

hypern
hypern

Reputation: 887

I thought the application.scss file is supposed to grab all the stylesheets in it's folder and child folders but it's not. (Oddly, the .js files load just fine.)

By adding *= require_tree . to application.scss I think it should load all of the files recursively like you expect.

Upvotes: 0

noman tayyab
noman tayyab

Reputation: 365

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

hope this helps

Upvotes: 2

Related Questions