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

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.

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

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

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

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

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

Anyone working on a fix?

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.

I see. So this is an issue with sprockets.

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 !

@jwcooper and @f-mer’s solution helped me solved the issue for me as well.

I faced this problem in my Rails 6.1 application in which sass-rails 6.0.0 was being used. For more details please refer my SO post at https://stackoverflow.com/q/68638741/936494

Thanks.

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.

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)

@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

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?