rails 5.1.0.rc1, sass-rails 5.0.6: variables declared in one file undefined in second file

[rafaelfranca]

From @stepheneb on April 3, 2017 17:13

In a very simple rails 5.0.1.rc1 application a sass variable defined in the file colors.scss is available in application.scss (the file that imports colors.scss) but not in a second file, welcome.scss imported by application.scss.

file: colors.scss

$backgroundcolor: rgb(200, 117, 216);

file: application.scss

@import 'colors';

p {
  color: $backgroundcolor;
}

This works correctly.

However if I remove the p styling from application.scss and instead reference it from a second file welcome.scss Rails generates an Undefined variable: "$backgroundcolor". error when rendering.

file: application.scss

@import 'colors';
@import 'welcome';

file: welcome.scss

p {
  color: $backgroundcolor;
}

Earlier I described this bug in a rails issue: rails/rails#28628 however I think the bug might be in the sass-rails gem.

Copied from original issue: rails/sass-rails#396

[rafaelfranca]

From @stepheneb on April 3, 2017 20:17

Example repo with simple Rails 5.1.rc1 app.

At this commit referencing the sass var from application.scss works:
stepheneb/sass-demo@bf854ab

At next commit referencing sass variable from second imported file doesn't work:
stepheneb/sass-demo@fccec7f

At last commit using sass-rails v5.0.6 instead of master branch version of gem (Rails 5.1.rc1 generated github reference for sass-rails gem in Gemfile) problem with second @import still present:
stepheneb/sass-demo@ac6f3a0

[rafaelfranca]

From @RemyMaucourt on April 21, 2017 13:29

I have the exact same problem with sass-rails 6.0.0.beta1.

[rafaelfranca]

I don't remember in any change in the Rails framework or sass-rails that could cause this. What is the behavior in sass command line?

[rafaelfranca]

Just confirmed that the sass behavior is what you are expecting.

[rafaelfranca]

I tried to find when this changed and I could not find a combination of version where this used to work. Do you know if it ever worked?

[rafaelfranca]

From @stepheneb on April 21, 2017 16:47

@rafaelfranca can you describe more how you tested for the correct behavior? I tested with new Rails 5.1.rc1 app in this simple repo with only 7 commits: https://github.com/stepheneb/sass-demo

I was not able to reference sass variables in other files.

I have a much larger app running in Rails 5.0.2 where the referencing of sass variables works fine.

If it would be helpful I can add a branch to my simple sass-demo repo which uses Rails 5.0.2. I expect to see the referencing of sass variables in other files work (just like it does in my larger project) -- but with confusing bugs like this maybe it won't work ... and that will provide a useful clue.

[rafaelfranca]

I tried both Rails 5.0.2 and 5.1. With both sass-rails 5.0.x and 6.x and sprockets 3 an I could not get that working. If you could make the sass-demo repo working that would be great so we could narrow down what changed.

[rafaelfranca]

From @stepheneb on April 21, 2017 18:7

I just created this new repo using Rails 5.0.2 and the sass variable defined in colors.scss works in welcome.scss: https://github.com/stepheneb/sass-demo-5.0.2

[rafaelfranca]

From @stepheneb on April 21, 2017 18:19

Am getting a bit confused ... Here is the same set of commits in a new repo -- just using Rails 5.1.0.rc2. -- and the sass variable defined in colors.scss works in welcome.scss: https://github.com/stepheneb/sass-demo-5.1.0.rc2

Now I need to find out why my earlier test with Rails 5.1.0.rc1 didn't work (at this point I'm not convinced it has to do with Rails 5.1.0.rc1).

[rafaelfranca]

From @stepheneb on April 21, 2017 19:59

The problem is with sprockets (4.0.0.beta4)

At the time I created the original sass-demo repo with Rails 5.1.0.rc1 Gemfile.lock resolved to sprockets (4.0.0.beta4):

https://github.com/stepheneb/sass-demo/blob/47ef55e773564b1c705f15e519a25a739af25684/Gemfile.lock#L141

This seems strange because in the same Gemfile.lock sass-rails specified sprockets (>= 2.8, < 4.0)

https://github.com/stepheneb/sass-demo/blob/47ef55e773564b1c705f15e519a25a739af25684/Gemfile.lock#L126

The demo built with Rails 5.1.0.rc2 instead resolves to sprockets (3.7.1)

https://github.com/stepheneb/sass-demo-5.1.0.rc2/blob/master/Gemfile.lock#L141

In the original sass-demo repository locking the Sprockets dependency in the Gemfile to 3.7.1 fixes the problem.

stepheneb/sass-demo@e94b7b4

[rafaelfranca]

I see. So this is an issue with sprockets.

[RemyMaucourt]

So a solution could be to force sprockets version to 3?

[keithbro]

FWIW, for me, the problem exists in sass-rails 5.0.2 but works fine when i downgrade to sass-rails 4.0.5.

[alexmorral]

We are experiencing the same problem using rails 5.0.6, sprockets 3.7.1 and sprockets-rails 3.2.1

Any updates on this?

[schneems]

@rafaelfranca any idea what changed? There's lots of links on this thread. Which one is the example app that works with sprockets 3 but not with sprockets 4?

[abevoelker]

@schneems here's a fresh Rails 5.1 repro app w/ a good and bad branch: https://github.com/abevoelker/sprockets-bug-repro

Just run rake assets:precompile to test.

Works with sprockets 3.7.1; fails with sprockets 4.0.0.beta6

[blakeperdue]

So, what's the resolution on this one? Downgrade sprockets?

Anyone working on a fix?

[jwcooper]

Not sure how much this helps, but a workaround that appears to work is to update the manifest to directly link the files you'd like pre-compiled:

//= link_tree ../images
//= link application.js
//= link application.css

Working example from the previously failing 'bad' branch example posted earlier:
https://github.com/jwcooper/sprockets-bug-repro/tree/bad

rake assets:precompile to test as before

[benbcai]

My app was on Rails 4.2, Sprockets 2.12, and Sprockets-rails 2.3 and did not encounter this error. I started getting this error once I upgraded my app to Rails 5.1; Sprockets 3.7, and Sprockets-rails 3.2. I tried bumping Sprockets down to 3.3 but still seeing the error.

[samanthi22]

remove "= require_self" and "=require_tree ." from application.scss and it should work

[giubueno]

Thank you @samanthi22. Your suggestion worked for me.

[paulfranzen]

Thanks!!!! @samanthi22 need to get this solution into a more SEO friendly format 😄