"Front-End Framework" chapter derailment

[tdkehoe]

My app looked fine in the browser at the end of the chapter "Layouts and Views." In the chapter "Front-End Framework" I ran:

$ rails generate layout:install foundation5 --force

I see the file

app/assets/stylesheets/framework_and_overrides.css.scss

and I don't see the file

app/assets/stylesheets/simple.css

So I know that the "install foundation5" ran.

In the browser window I see an error screen with two errors (attached).

In the terminal I see this error message, followed by lots of lines starting with "sass":

Sass::SyntaxError - Invalid CSS after "...ules: $modules ": expected "}", was "!global;"

In looking at the terminal, I see that "install foundation5" removed two files not mentioned in the book:

app/assets/stylesheets/application.css
app/assets/stylesheets/bootstrap_and_overrides.css.scss

I also found that after using "git reset --hard" one new file remained:

app/assets/stylesheets/framework_and_overrides.css.scss

With this file I get the error messages. When I delete this file my old webpage comes back.

Any suggestions?

[DanielKehoe]

Try running $ bundle update in your terminal application. It's possible that the foundation-rails gem needs to be updated (the newest version is 5.5.1.0). In the past, errors with "invalid CSS... !global" have been related to Foundation and Sass issues.

[tdkehoe]

$bundle update

says that I have foundation-rails 5.5.0.0 but it didn't update to 5.5.1.0. My Gemfile doesn't have a version lock on foundation-rails. I tried running

$ bundle update foundation-rails

but it didn't update to 5.5.1.0.

[DanielKehoe]

Try removing the file Gemfile.lock and running $ bundle install.

[DanielKehoe]

The Gemfile listing in versions of the book prior to version 2.1.6 showed gem 'sass-rails', '~> 4.0.1' where it should have been gem 'sass-rails', '~> 5.0'. I've corrected the error in version 2.1.6 of the book.