Getting error on CSS with Ruby On Rails

Question

When I run this i get the error: Sass::SyntaxError in Welcome#index error index.html.erb:

These are my ruby files:

<!DOCTYPE html>
<html>
    <head>
        <%= stylesheet_link_tag "welcome.scss" %>
    </head>

    <body>
        <div id = "header">
            <p id = "title">Welcome To Dot</p>
        </div>
        <h1>Make Life Easier</h1>
        <h2>Enter</h2>
    </body>
</html>

Welcome.scss:

#title{
    font-size:30px;
    font-weight: bold;
    font-family: fantasy;
    color: #0b1e40;
    text-align: left;
}

#header{
    background-color: sandybrown;
    position: fixed;
    z-index: 1;    
}

application.html.erb:

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

<%= yield %>

</body>
</html>

Gemstones:

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.5'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

welcome_controller.rb

class WelcomeController < ApplicationController

    def index
    end
end

routes.rb

Rails.application.routes.draw do

  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

  # You can have the root of your site routed with "root"
  root 'welcome#index'
end

I'm not sure why im getting this. If I changed 'application' back to 'default' I no longer get the error but the CSS does not show up on the webpage. This is my first Ruby On Rails project so I would appreciate any help.

ExecJS::ProgramError in Welcome#index Showing C:/Users/Michael/Projects/dot/app/views/layouts/application.html.erb where line #5 raised:

TypeError: Object doesn't support this property or method Rails.root: C:/Users/Michael/Dropbox/Docs/Homework/Projects/dot

app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb__35629208_74953452'

Have you installed the proper gems to use SCSS/SASS with Rails? You need to install `gem 'sass'` and `gem 'sass-rails'` for SASS to work. — Alexander Trust, Dec 21 '15 at 02:50
And you're missing a semicolon at the end of the titles `color` value, too. — Alexander Trust, Dec 21 '15 at 02:51
yeah i found the semicolon but I didn't have those gems installed. I'm doing that now so hopefully that was the problem! — Mike, Dec 21 '15 at 02:56
SASS is a compiler for SCSS files, they will be compiled and the output is a normal CSS file which is then used, because browsers do not understand SCSS. But for a developer it is easier to work with the SASS syntax, because of `@extend` and `mixins` and so on... — Alexander Trust, Dec 21 '15 at 03:00
@AlexanderTrust I installed those gems but I am still getting this error: ExecJS::ProgramError in Welcome#index — Mike, Dec 21 '15 at 03:00
This probably results because you deleted the turbolink js. If you use the turbolinks gem this line is necessary. If you deactivate the turbolinks gem it should suspend the error. I guess, because I don't know what the whole error is. — Alexander Trust, Dec 21 '15 at 03:06
I'm not sure what the turbolinks gem is or if I am using this but the line in my application.html.erb file is still: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> — Mike, Dec 21 '15 at 03:08
Turbolinks is installed by default with a new rails (4.x) project. It is a bunch of Ajax-methods for faster loading of websites, by preloading of links and so on. In your gemfile the should be a `gem 'turbolinks'`. — Alexander Trust, Dec 21 '15 at 03:10
@AlexanderTrust I added my gemfile to the question. It has turbolinks. — Mike, Dec 21 '15 at 03:16
It's just beneath `gem 'jquery-rails'` **but** don't mess with it right now. Just go back to the default with those 3 lines. This makes sure that the application's asset pipeline is properly loaded. As for this pipeline, there are rules. Do you have a `Welcome` controller and views for it? If not the welcome.scss is not loaded by default, you either have to @import it in the `application.scss`, but better would be, just paste the content from your welcome.scss to the application.scss - this is loaded on every view. — Alexander Trust, Dec 21 '15 at 03:24
@AlexanderTrust I added my welcome controller and my view for it is index.html.erb. So since I have the welcome controller do I need to import it into the application.scss or not? Thanks — Mike, Dec 21 '15 at 03:34
No, then it should be loaded automatically whenever the index, or other views of your welcome controller are loaded, but then only. This is a good way to separate styles for individual controllers/models, if you follow the naming convention that is. But it's confusing at first. And make sure that you can access the index by adding a proper route. Just asking, maybe you already have a whole `resources :welcome` in your routes file. — Alexander Trust, Dec 21 '15 at 04:01
Ups, did not recognize you pasted your `routes.rb` too, so yes you're good then. — Alexander Trust, Dec 21 '15 at 04:03

score 1 · Answer 1 · answered Dec 21 '15 at 05:31

1

There is syntax error in your welcome.scss you forgot the ;

#title{
  ...
  color: #0b1e40;
  ... 
}

answered Dec 21 '15 at 05:31

Deepak Mahakale

22,834
10
68
88

score 1 · Accepted Answer · answered Dec 21 '15 at 12:23

Missing semicolon (if you've ever done PHP, it would be one of the first things you'd look for):

#title{
  color: #0b1e40;
}

Looking around, the error you have seems to be this:

Object doesn't support this property or method Rails.root

This suggests a problem with your routes:

#config/routes.rb
root "welcome#index" #-> you don't need (get "welcome#index")

--

You may also have an issue with ExecJS (the class which runs javascript on your system) -- if you're using Windows, you should download nodeJS, install and run it, restarting your rails server in the meantime.

This should solve the problem with calling application vs default in your layout.

Yes! node.js was the problem. I wish Ruby would let you know this in their tutorial. Thank You! — Mike, Dec 21 '15 at 16:46

score 0 · Answer 3 · answered Jun 01 '16 at 15:16

Maybe this helps you... (if you use rails on windows)

How to fix error

Navigate to \app\views\layouts\application.html.erb

Change line 6 from

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

to

<%= javascript_include_tag 'defaults', 'data-turbolinks-track' => true %>

And you’re done!

i found it on next url

http://mech.xyz/how-to-fix-ruby-on-rails-turbolinks-js-coffee-error-windows/

score -1 · Answer 4 · answered Dec 21 '15 at 03:01

-1

Use the assets pipeline. Just place your Welcome.scss into app/assets/stylesheets. Remove <%= stylesheet_link_tag "welcome.scss" %>

answered Dec 21 '15 at 03:01

nobilik

736
9
29

Thanks I deleted that line but I am still getting this error: ExecJS::ProgramError in Welcome#index Showing C:/Users/Michael/Projects/dot/app/views/layouts/application.html.erb where line #5 raised: TypeError: Object doesn't support this property or method – Mike Dec 21 '15 at 03:04
What is written in line 5 of your application.html.erb? – Alexander Trust Dec 21 '15 at 03:07
@Mike do you have `gem 'turbolinks'` in your gemfile? – nobilik Dec 21 '15 at 03:16
@AlexanderTrust This is line 5: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> – Mike Dec 21 '15 at 03:18
@nobilik I do have turbolinks, I added my gemfile to the question so you can check it. – Mike Dec 21 '15 at 03:19
Windows? Maybe same story http://stackoverflow.com/questions/28312460/object-doesnt-support-this-property-or-method-rails-windows-64bit ? – nobilik Dec 21 '15 at 03:28

Getting error on CSS with Ruby On Rails

4 Answers4