4

I am having some trouble pre-compiling assets for a new Rails 6 app I'm working on.

My application.scss looks like this:

@import 'vars';
@import 'bootstrap';
@import 'bootstrap_overrides';
@import 'font_awesome5.css';
@import 'base';
@import 'dashboard';
# etc...

but upon deploying to production with Capistrano, the asset pre-compilation step fails with the following:

SassC::SyntaxError: Error: Undefined variable: "$padding"
       on line 18:12 of app/assets/stylesheets/base.scss
>>   padding: $padding;

   -----------^

The $padding variable is defined in vars.scss:

$padding: 60px 0px;

and, as mentioned, is being imported in application.scss. Why would other files complain that it's necessary if application.scss is already importing it?

The app works fine in development.

Thanks in advance!

DaniG2k
  • 4,772
  • 36
  • 77
  • 1
    I think the compiler compiles each file on it's own before importing it to application.js so it need the variables BEFORE being imported. So it grabs the base.scss file parses it and it doesn't know that $padding is yet so it throws an error. The `vars` import on application.scss only replaces variables on that file and not from the imported files. – arieljuod Nov 03 '19 at 15:18
  • 1
    Having the exact same issue. Works in development, not in production (heroku). Any solutions found so far? – dcts Nov 26 '19 at 13:04
  • @thomas / DaniG2k did either of you figure out what the issue was? I'm experiencing the same thing. Thanks! – Nathan Bashaw Jan 05 '20 at 00:07
  • @NathanBashaw unfortunately I still have the issue. If you find a solution please post as well. I stopped using scss variables since for me it was just one variable. – dcts Jan 09 '20 at 13:51

1 Answers1

2

EDIT: The better answer was given by vmarquet in response to a similar question. https://stackoverflow.com/a/62238810/4493692

To sum up vmarquet's answer, the latest version of sprockets defaults to compiling all scss files in assets/stylesheets as top-level assets. What you want is to compile your application.scss file, not all partials and imports independently.

This is configured in manifest.js. Instead of the default directory includes, you will want something like this:

//= link_tree ../images
//= link application.css
//= link application.js
Dave Kruse
  • 119
  • 4