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

[stepheneb]

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: https://github.com/rails/rails/issues/28628 however I think the bug might be in the sass-rails gem.

[stepheneb]

Example repo with simple Rails 5.1.rc1 app.

At this commit referencing the sass var from application.scss works: https://github.com/stepheneb/sass-demo/commit/bf854ab3a02d99235db665094c3cc32d692a4140

At next commit referencing sass variable from second imported file doesn't work: https://github.com/stepheneb/sass-demo/commit/fccec7f03b80109ff74f2cd1e9802838a12caa4d

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: https://github.com/stepheneb/sass-demo/commit/ac6f3a006c4a0223a5f8615dacaa0b2a9bb1449a

[RemyMaucourt]

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?

[stepheneb]

@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.

[stepheneb]

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

[stepheneb]

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).

[stepheneb]

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.

https://github.com/stepheneb/sass-demo/commit/e94b7b4b76854c9ef264728b67879e75751594f7

[rafaelfranca]

I see. So this is an issue with sprockets.

[rafaelfranca]

This issue was moved to rails/sprockets#474