"Error: Undefined variable" in Rails sass compilation

user_1115117 0
Viewed 294

I am building a rails app and having some odd sass compilation issues.

My setup:

  • Rails 6.1.3
  • Ruby 3.0.0
  • sass-rails 6.0.0
  • sassc-rails 2.1.2

My application.scss basically loads a few sass files that set some variables, and at the end imports the layout.scss which effectively uses the imported variables.

// application.scss
@import "normalize";
@import "variables/colors";
@import "variables/typography";
@import "variables/sizes";
@import "layout";

// variables/_typography.scss
$ui-font-family: "Poppins", sans-serif;
$ui-font-family-title: "Lato", sans-serif;

// layout.scss
h1, h2, h3, h4, h5, h6 {
  font-family: $ui-font-family-title;
}

// views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

At the beginning it worked, but then I noticed that sometimes I got an error saying

Error: Undefined variable: "$ui-font-family-title".
        on line 3:16 of app/assets/stylesheets/layout.scss
>>   font-family: $ui-font-family-title;

However, sometimes after recompiling assets (because of a change in any scss file) I noticed it could either work or fail (with that error).

I added a @debug "Compiling filename" to each sass file to understand the compilation order and found something very odd to me.

It always compiles every sass file two times, and the problem is that sometimes it compiles variables once and therefore it fails when compiling the layout.scss the second time.

This is how it looks when it works:

working version

And this is how it looks when failing:

enter image description here

As you can see, when it fails it compiles the layout.scss file twice in a row, and my guess is that since on the second iteration it doesn't import the other files, it can't find the variables as expected.

Do you have any idea on what could be going wrong here?

sprockets sass ruby-on-rails
1 Answers

I actually found the problem.

It seems that on Sprockets 4.0, the way it compiles scss files is defined here:

# app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css

This basically picks any css/scss file in the stylesheets folder to compile.

Therefore, the solution to this issue would be whether to update the manifest to use just a link to the only file you want as a point of entry, or leave only the application.scss file in first level of the folder and move all the others to subfolders so they are not targeted by the manifest.

I ended up with this now, which works:

// application.scss
@import "utils/normalize";
@import "variables/colors";
@import "variables/typography";
@import "variables/sizes";
@import "pages/layout";

So the only scss file in stylesheets/ (at least in the first level deep) is the application.scss.

You can find more information here on the sprockets upgrading docs:

You may also find that some files that were not previously compiled as top-level targets are now. For instance, if your existing app has any js files directly at ./app/assets/javascripts or css/scss files ./app/assets/stylesheets, Rails with Sprockets 4 will now compile them as top-level targets. Since they were not previously treated as such, you probably don't mean them to be; if they are .scss partials referencing variables meant to be defined in other files, it may even result in an error message that looks like Undefined variable: $some_variable.

user_11151170
Related