CODEWITHSUNDEEP
ruby-on-rails
T M
T M

Reputation: 95

How to implement custom css in Ruby on Rails application?

I could not implement customer css in Ruby on Rails application. The changes that I've made locally don't shown up on the pages in Heroku.

I find similar question and one answer on it.
Even so this answer was not marked as the solution, I’ve changed files accordingly this answer and the link provided(see below). Yet, I still could not implement customer css.

Ruby on Rails Tutorial custom CSS not showing up in app

//edited

I find that the possible reason for not shown up css is that precompile run locally(link below) and deleted as suggested file .json. But the custom.css is not implemented yet.

https://help.heroku.com/TEN5TWQ1/why-are-my-css-js-changes-not-showing-up-in-my-rails-app

    ‘’’ Gemfile’’’
    gem 'bootstrap-sass',          '3.3.6'
    gem 'sass-rails',              '5.0.6'

‘’’app/assets/stylesheets/application.scss’’’ -edited

@import main;
@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";
@import "styles";
@import 'colors';
@import "sessions";
@import "users";

‘’’app/assets/javascripts/application.js’’’

     //= require jquery
    //= require jquery_ujs

    //= require bootstrap

//= require_tree .

    bundle install

//edited

'''application.html.erb'''

    !DOCTYPE html>
    <html>
      <head>
        <title><%= full_title(yield(:title)) %></title>
        <%= stylesheet_link_tag "application", media: "all",
                                               "data-turbolinks-track" => true %>
        <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
        <%= csrf_meta_tags %>
        <%= render 'layouts/shim' %>
      </head>
       <body>
        <body>
        <%= render 'layouts/header' %>
        <div class="container">
          <% flash.each do |message_type, message| %>
            <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
          <% end %>
          <%= yield %>
          <%= render 'layouts/footer' %>
          <%= debug(params) if Rails.env.development? %>
        </div>
      </body>
    </html>


    <% flash.each do |message_type, message| %>
            <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
          <% end %>



    //custom.css.scss(first lines)
    //edited


        * mixins, variables, etc. */
    .t-a
     {
    color: red;
    }


//applicatio.css.scss
//edited

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

     *= require_tree .
     *= require_self
     *= require custom.css.scss
     */

    @import "bootstrap-sprockets";
    @import "bootstrap";
    @import "custom";
    @import "styles";

Upvotes: 0

Views: 5010

Answers (5)

Merey Nurlan
Merey Nurlan

Reputation: 305

I saw in one answer that it was resolved by putting @import "custom" above @import "boostrap". May be you should try that.

Upvotes: 0

T M
T M

Reputation: 95

You could implement customer css in Ruby on Rails application. For example, you could change a color of the texts or the links, or the font sizes regardless of the first or the second approach(see below)

the first approach:

using import statements in application.scss:

    @import "bootstrap-sprockets";
    @import "bootstrap";
    @import "custom";
    @import "styles";

the second approach: 

   a) using import statements in custom.scss :
      @import "bootstrap-sprockets";
      @import "bootstrap";

   b) using statements as below in the application.scss:
         *= require_tree .
         *= require_self

You should not mix up the first and the second approach.

    You could not change hover as you would  like because
    it need to be to complied with bootstrap settings.
    For example, changing hover to green or red produces error.
    So, I ended up using the grey-darker color(see below) instead.
    You could override bootstrap but it is considered as the
    bad idea. 


    examples of changing  formatting:

        h1.green-text { color: green; font-size: 10em; }

        <h1 class="green-text">This text is very large and green
        </h1>


        a {
         color: green;
         &:hover {
             color: $gray-darker;
           }

         }

Upvotes: 0

mechnicov
mechnicov

Reputation: 15248

You need to have app/assets/stylesheets/application.scss and rename all .css in .scss.

Then in your app/assets/stylesheets/application.scss delete all *= require and use:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";

In your app/assets/stylesheets/custom.scss use just usual CSS-classes and SCSS without any @import.

Be careful and don't use in both files the same classes because of overriding.

If you decide to have new file says app/assets/stylesheets/styles.scss.

You need to add to application.scss

@import "styles";

That should works perfectly.

Upvotes: 1

Pragya Sriharsh
Pragya Sriharsh

Reputation: 559

Always follow one approach. Either

1) if you are using .scss file then use @import only. 

  @import "custom"

Remove all other syntax like *=require "custom"

Or 2) If you are using .css file then use only below syntax

  *= require "custom"

And remove all @import syntax

Never mix them like you did in your code.

Do one thing , follow second one approach. And require your custom css file just above the *=require_tree . For ex.

 *=require "custom"
 *=require_tree .

Then let me know. After doing this, do not forget to restart your server as these files load once at the time server start.

Upvotes: 1

Maxence
Maxence

Reputation: 2339

I am not an Ruby expert. I will give advice based on my experience, that may differ from actual good practice.

1st thing: If you are writing Sass, I have realised it is good practice to show all preprocessors in the file name. The way it works is that the furthest preprocessor from file name will be interpreted first. For example: file whatever.js.coffee.erb will be first interpreted by Ruby interpreter, then by coffee script interpreter, and then final file will be some javascript.

When compiling my assets locally I have noticed I had to be explicit with names. So basically renaming application.scss to application.css.scss is harmless and good practice.

(though it may not be the source of your problem)

2nd thing: The bits you have provided don't really explain why custom.css styles are not showing in your view.

Why ?

Because your code "looks" good to me.

What is it doing ?

Well your Rails app has stylesheets located in app/assets/stylesheets. Though those stylesheets will not automagically appear on your web pages.

In order to add these stylesheets to your pages there is a helper called stylesheet_link_tag. stylesheet_link_tag will just add a link to the stylesheet file in your HTML page. It needs be placed between <head></head> html tags.

In Rails though you don't recreate the <head></head> tags for every page. All views inerhit from a global layout template called application.html.erb (you know about this one, you copied content) and this is the place you can globally handle stylesheets attachment.

In your tutorial, the mentor has added a single stylesheet in the application.html.erb file : application (Rails will understand it as application.css or application.css.scss ... and try to find it in the app/assets/stylesheets folder) . All the webpages of your website will have this very stylesheet.

But then you tell me : "how can I have a single file for my whole app.. I have lots of controllers and views?"

This is where it gets interesting: there are a few tricks to tweek this stylesheet. Mostly @import and *= require. Both allow to import other stylesheets into the current stylesheet. (require is Ruby, import is Sass)

/*
 *= require custom.css.scss 
*/
@import "custom";

The above code will do the same: aggregate the file custom.css.scss to application.css. If you add more files they will be aggregated too.

some specifics:

*= require_tree. will import every stylesheet in app/assets/stylesheets folder. Quite convenient if you want to make a very big css file that can be used on every page of your site.

*= require_self will process what is after the commmented part. basically it says: "disregard the styles, just do the require things"

Ok now what you can do :

  • rename application.scss to application.css.scss
  • reinstate require_self : I am not sure it actually has any effect on the @imports but it is no harm to have it.

If that does not solve your problem : Add the custom file in a require : 

 /*
   *= require custom.css.scss 
 */

It should not fail (don't forget to rename custom as per above though)

Last think: reinstate require tree. It should gather all stylesheet files and aggregate them to application.css (here I write application.css because I talk about the stylesheet in the final webpage and not the file in your Rails app)(also in development your application.css file may not look aggregated but it will in production)

Upvotes: 0

Related Questions