New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rafaelfranca opened this Issue Apr 21, 2017 · 22 comments

Comments

Projects
None yet
@rafaelfranca
Member

rafaelfranca commented Apr 21, 2017

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

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

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

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

From @RemyMaucourt on April 21, 2017 13:29

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

@rafaelfranca

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

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

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

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

@rafaelfranca

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

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

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

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

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

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

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

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

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

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

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

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

This comment has been minimized.

Member

rafaelfranca commented Apr 21, 2017

I see. So this is an issue with sprockets.

@RemyMaucourt

This comment has been minimized.

RemyMaucourt commented May 23, 2017

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

@keithbro

This comment has been minimized.

keithbro commented Sep 26, 2017

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

This comment has been minimized.

alexmorral commented Oct 13, 2017

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

This comment has been minimized.

Member

schneems commented Nov 17, 2017

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

@schneems schneems added the bug label Nov 17, 2017

@abevoelker

This comment has been minimized.

abevoelker commented Dec 20, 2017

@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

This comment has been minimized.

blakeperdue commented Feb 10, 2018

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

Anyone working on a fix?

@jwcooper

This comment has been minimized.

jwcooper commented Mar 21, 2018

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

This comment has been minimized.

benbcai commented Apr 10, 2018

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

This comment has been minimized.

samanthi22 commented Apr 29, 2018

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

@giubueno

This comment has been minimized.

giubueno commented Oct 10, 2018

Thank you @samanthi22. Your suggestion worked for me.

@paulfranzen

This comment has been minimized.

paulfranzen commented Oct 30, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment