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 😄

[Skulli]

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]

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]

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]

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

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]

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]

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]

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]

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

[souvik]

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]

@f-mer thanks!