rails / sass-rails

Ruby on Rails stylesheet engine for Sass

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

stepheneb opened this issue · comments

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.

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

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

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?

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

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

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.

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

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

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

I see. So this is an issue with sprockets.