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
– Alexander Trust, Commented Dec 21, 2015 at 2:50
And you're missing a semicolon at the end of the titles color value, too. — Alexander Trust
– Alexander Trust, Commented Dec 21, 2015 at 2: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
– Mike, Commented Dec 21, 2015 at 2: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
– Alexander Trust, Commented Dec 21, 2015 at 3:00
@AlexanderTrust I installed those gems but I am still getting this error: ExecJS::ProgramError in Welcome#index — Mike
– Mike, Commented Dec 21, 2015 at 3:00

Richard Peck · Accepted Answer · 2015-12-21 12:23:15Z

1

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.

answered Dec 21, 2015 at 12:23

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Over a year ago

Yes! node.js was the problem. I wish Ruby would let you know this in their tutorial. Thank You!

Deepak Mahakale · Accepted Answer · 2015-12-21 05:31:55Z

1

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

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

answered Dec 21, 2015 at 5:31

Deepak Mahakale

23.8k10 gold badges73 silver badges94 bronze badges

Comments

Alexander Garashko · Accepted Answer · 2016-06-01 15:16:38Z

0

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/

answered Jun 1, 2016 at 15:16

Alexander Garashko

1

Comments

nobilik · Accepted Answer · 2015-12-21 03:01:04Z

-1

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

answered Dec 21, 2015 at 3:01

nobilik

7369 silver badges32 bronze badges

6 Comments

Mike Over a year ago

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

Alexander Trust Over a year ago

What is written in line 5 of your application.html.erb?

nobilik Over a year ago

@Mike do you have gem 'turbolinks' in your gemfile?

Mike Over a year ago

@AlexanderTrust This is line 5: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

Mike Over a year ago

@nobilik I do have turbolinks, I added my gemfile to the question so you can check it.

|

Collectives™ on Stack Overflow

Getting error on CSS with Ruby On Rails

4 Answers 4

1 Comment

Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related