Rails Skins not Finding SASS Variables

Question

I am trying to implement user-chosen skins in my Rails app, as recommended in this SO post.

I have my skins in a folder in app/assets/stylesheets/skins and each one is structured like this:

$color-background: #F0E6DA !important;       /* Main background */
$color-background-alt: #a8a198 !important;   /* Alternate background */
$color-background-box: #ffffff !important;   /* Box Background */

$color-text: #000000 !important;             /* Main text (contrast bg) */
$color-text-alt: #653D3D !important;         /* Alternate text */
$color-text-box: #000000 !important;         /* Box text (contrast box-bg) */

$color-admin: #225e51 !important;            /* CTAs & accents (main/opp txt ok) */
$color-accent-main: #842a57 !important;      /* Good with main/opp text */
$color-accent-subtle: #a86989 !important;    /* Subtle (main/opp text) */

$color-bad: #983C3C !important;              /* both text */
$color-good: #16537e !important;             /* both text */

The rest of my SCSS is in my application.bootstrap.scss file, where the CSS references these variable names.

I reference this in my application.html.erb like this:

<%= stylesheet_link_tag "#{@current_theme}", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

And have this in my application_helper.rb:

module ApplicationHelper

    def current_theme
        if @current_user && @current_user.chosen_skin != ( nil || "" )
            @current_theme = @current_user.chosen_skin
        else
            @current_theme = 'skins/default'
        end
    end
    
end

I added the following to my assets.rb (and restarted my server):

Rails.application.config.assets.precompile += %w( skins/* )

When I try to load a page, I get an error saying Error: Undefined Variable. pointing to the first time my application.bootstrap.scss references a variable from one of the skins files. (Yes, I double checked that I do, in fact, have one called default.scss.css.

When I look at the rendered line in the application header, it just shows up like this:

<link rel="stylesheet" href="" data-turbo-track="reload" />
<link rel="stylesheet" href="/assets/application-3484df6482827f75364ce1ebdc6829c5125776d4a06144b1a5c7a9fe2e71f7b9.css" data-turbo-track="reload" />

Can anyone see where I'm going wrong here?

Did you see the following ? https://stackoverflow.com/questions/21911620/rails-bootstrap-sass-assets-compilation-error-undefined-variable-alert-padding you can also try replacing `Rails.application.config.assets.precompile += %w( skins/* )` to `Rails.application.config.assets.precompile += %w( skins/*.scss )` — Ghulam Farid, Aug 06 '23 at 14:41
I'm not familiar with Ruby On Rails, but it sounds like `<%= stylesheet_link_tag "#{@current_theme}", "data-turbo-track": "reload" %>` isn't being imported into your `application.bootstrap.scss`, and instead is treated as a separate file. Generally, SCSS files will only load variables that are `@import`ed or `@use`d from within the file itself, and because it's not the same file it probably isn't loading the variables. (SCSS isn't javascript, you can't load variables from a previous file in the HTML, you have to import the file directly into the SCSS file you want to use) — Eliezer Berlin, Aug 11 '23 at 13:43
In the post you linked here: https://stackoverflow.com/questions/11928476/themes-in-rails-app , people are creating a theme file that contains ALL of the CSS, created from a @mixin imported from a main.scss file. (That is, the primary file is actually "theme.scss" that defines all the variables, then at the bottom of every theme file, it imports "main.scss" to use the variables that were defined in the theme.) — Eliezer Berlin, Aug 11 '23 at 13:51
That is, they remove this line `<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>`, and ***only*** use the theme file. WITHIN THE THEME FILE, you import the application.scss file. — Eliezer Berlin, Aug 11 '23 at 13:54

score 0 · Answer 1 · answered Aug 07 '23 at 14:54

Try correcting application_helper.rb:

module ApplicationHelper

  def current_theme
    if @current_user && @current_user.chosen_skin.present?
      @current_theme = @current_user.chosen_skin
    else
      @current_theme = 'skins/default'
    end
  end

end

Rails Skins not Finding SASS Variables

1 Answers1