Skip to content
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 · 33 comments
Labels
bug

Comments

@rafaelfranca
Copy link
Member

@rafaelfranca 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
Copy link
Member Author

@rafaelfranca 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
Copy link
Member Author

@rafaelfranca 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
Copy link
Member Author

@rafaelfranca 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
Copy link
Member Author

@rafaelfranca rafaelfranca commented Apr 21, 2017

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

@rafaelfranca
Copy link
Member Author

@rafaelfranca 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
Copy link
Member Author

@rafaelfranca 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
Copy link
Member Author

@rafaelfranca 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
Copy link
Member Author

@rafaelfranca 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
Copy link
Member Author

@rafaelfranca 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
Copy link
Member Author

@rafaelfranca 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
Copy link
Member Author

@rafaelfranca rafaelfranca commented Apr 21, 2017

I see. So this is an issue with sprockets.

@RemyMaucourt
Copy link

@RemyMaucourt RemyMaucourt commented May 23, 2017

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

@keithbro
Copy link

@keithbro 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
Copy link

@alexmorral 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
Copy link
Member

@schneems 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
Copy link

@abevoelker 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
Copy link

@blakeperdue blakeperdue commented Feb 10, 2018

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

Anyone working on a fix?

@jwcooper
Copy link

@jwcooper 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
Copy link

@benbcai 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
Copy link

@samanthi22 samanthi22 commented Apr 29, 2018

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

@giubueno
Copy link

@giubueno giubueno commented Oct 10, 2018

Thank you @samanthi22. Your suggestion worked for me.

@paulfranzen
Copy link

@paulfranzen paulfranzen commented Oct 30, 2018

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

@Skulli
Copy link

@Skulli Skulli commented Feb 7, 2019

We have an rails 4.2 app with sprockets 3.7.2 and facing the same problems. Our main file does not have the above statements. It just includes several import-statements like

@import 'colors';
@import 'file_which_uses_variables_of_colors';

Still getting errors like

SassC::SyntaxError - Error: Undefined variable: "$current-element-color".
@doddy550
Copy link

@doddy550 doddy550 commented Mar 7, 2019

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

Have done this, and I'm still getting the pesky error. Any further advances as to the cause/resolve? Here's my config:

rails (5.2.2)
      actioncable (= 5.2.2)
      actionmailer (= 5.2.2)
      actionpack (= 5.2.2)
      actionview (= 5.2.2)
      activejob (= 5.2.2)
      activemodel (= 5.2.2)
      activerecord (= 5.2.2)
      activestorage (= 5.2.2)
      activesupport (= 5.2.2)
      bundler (>= 1.3.0)
      railties (= 5.2.2)
      sprockets-rails (>= 2.0.0)
    sprockets (3.7.2)
      concurrent-ruby (~> 1.0)
      rack (> 1, < 3)
    sprockets-rails (3.2.1)
      actionpack (>= 4.0)
      activesupport (>= 4.0)
      sprockets (>= 3.0.0)
@GriwMF
Copy link

@GriwMF GriwMF commented Apr 2, 2019

have same issue on sprockets (3.7.2) and rails 5.0.7.2. Removing require_self and require_tree didn't help.

Uptate: in my case it's working with explicitly set gem 'sprockets-rails', '2.3.3' in Gemfile

@scpike
Copy link

@scpike scpike commented Nov 15, 2019

@jwcooper thank you, that also fixed the issue for me.

For anyone else having this issue with Rails, I'd recommend reading the manifest section of the UPGRADING.md file https://github.com/rails/sprockets/blob/master/UPGRADING.md as it gives a very good description of the situation. @jrochkind thank you for contributing that---it probably saved me hours of my life.

@jrochkind
Copy link
Contributor

@jrochkind jrochkind commented Nov 16, 2019

So glad it helped, took me a while to figure out what was going on when I was confused too, and then write it up -- thanks for saying so @scpike !

@dlegr250
Copy link

@dlegr250 dlegr250 commented Jan 9, 2020

I can also confirm that @jwcooper solution of updating the assets/config/manifest.js file to link application.css solved my error:

SassC::SyntaxError: Error: Undefined variable: "$variable_name".

I use a separate file to create SCSS variables and then reference them in later files based on the import order in my application.scss file, something I've been doing for years in Rails applications.

I'm running:

  • Rails 6.0.2
  • sass-rails 6

Note that this was working fine on my local development machine and I only encountered the issue when I deployed and my CI ran the rake assets:precompile command.

@Goku-San
Copy link

@Goku-San Goku-San commented Feb 12, 2020

Hello everyone, just ran into this issue and thanks @jwcooper solution, I was able to solve the pesky error Undefined variable: "$variable_name" or missing file application.css :)

Rails 5.2.4.1
sassc-rails 2.1.2

And no references of sprockets gem in Gemfile directly!

@f-mer
Copy link

@f-mer f-mer commented Mar 11, 2020

Just ran into this issue yesterday and and had a hard time figuring out this behaviour. Just after I switched everything to webpacker and got weird 500 errors without a stacktrace I investigated some more and stumbled over the manifest.js. It was referencing css files that I've deleted after the webpacker re-factoring. Then this //= link_directory ../stylesheets .css line catched my attention. This line seems to instruct sprockets to independently process all files under app/assets/stylesheets. The repeated processing of files can be observed with @debug $foo; in one of you scss-files.

The solution is to replace //= link_directory ../stylesheets .css with //= link application.css and from there just use @import just as jwcooper suggested. Its a default configuration issue using scss.

@tbuehl
Copy link

@tbuehl tbuehl commented May 29, 2020

@jwcooper and @f-mer's solution did the trick for me.

@souvik
Copy link

@souvik souvik commented Dec 1, 2020

I am using Rails v6.0.3.4 and getting this error during the production build. I have found a solution using which I am able to resolve the issue. Before going to the solution, let me tell you the function of "link_directory" of Sprockets.

"link_directory" use the pre-processor based on the file extension of the given path. In "manifest.js" the "link_directory" applied on "../stylesheets" file. So, will use sass pre-processor for "application.scss" and all other .scss files. Also, files in subdirectories will not be linked.

I think the order of applying pre-processor on those files under the "stylesheets" directory important. So, what I did, I simply modified the file structure under that directory, like below

app/assets/stylesheets
|____application.scss
|____scss
| |____colors.scss
| |____welcome.scss

The content of the application.scss is like below

@import 'scss/colors';
@import 'scss/welcome';

After doing the above changes, then my build got successful.

@jakemcallister
Copy link

@jakemcallister jakemcallister commented Feb 17, 2021

@f-mer thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet