small medium large xlarge

15 Jul 2013, 15:28
Dave Tan (2 posts)

I am following the book code for code and then got to the application.css.scss part in page 97.

I was too lazy to type all the CSS code in so I just downloaded it from the link

Firstly the downloaded file is a CSS file not a SCSS file. Secondly after downloading it and running the server, I get the following error:

Sprockets::CircularDependencyError in Store#index

C:/Sites/work/depot/app/assets/stylesheets/application.css has already been required

    <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>

with the highlighted line being

<%= stylesheet_link_tag “application”, media: “all”, “data-turbolinks-track” => true %>

Help please? :)

The problem will go away if I delete the application CSS file or if I remove that line of code but I don’t think I’m supposed to do that.. Right?

15 Jul 2013, 18:55
Sam Ruby (633 posts)

First, no need to apologize for downloading the code samples, that’s what they are there for. :-)

Next, let’s take this one step at a time: application.css.scss is indeed a SCSS file, note the use of nested definitions:

#columns {
  background: #141;

  #main {
    margin-left: 17em;
    padding: 1em;
    background: white;

This file is to be placed into app/assets/stylesheets/application.css.sccs, and there is to be no app/assets/stylesheets/application.css file. The instructions to do so are in the paragraph immediately preceeding the code snippet:

To make this all work, first rename the file application.css to application.css.scss.

16 Jul 2013, 01:35
Dave Tan (2 posts)

You’re right, thanks!

I don’t know why I didn’t rename it to application.css.scss, I tried application.css and application.scss and both didn’t work for me

But yay! Thank you :)

You must be logged in to comment