Home/ Questions/Q 9217243
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T02:35:42+00:00

I have an application that has three different CSS themes and each of those

  • 0

I have an application that has three different CSS themes and each of those themes has a dozen or so color schemes. Everything works fine in development but the asset pipeline is giving me some odd issues.

Essentially I have several files like this

/themes
  /cool-theme
    _theme.scss
    /color-schemes
      red.scss

The idea is I precompile all the *.scss files except the partials (starting with the underscore) since they are included in the SASS. So I am using this code:

stylesheets_directory = "#{Rails.root}/app/assets/stylesheets"
config.assets.precompile += Dir.glob("#{stylesheets_directory}/**/*.scss").
                            map{|f| f[stylesheets_directory.size+1..-1]}.
                            select do |file|
                            if config.assets.precompile.include?(file)
                              puts "Already have #{file}"
                              false
                            elsif File.basename(file)[0...1] == "_"
                              puts "Partial detected #{file}"
                              false
                            else
                              puts "Including #{file}"
                              true
                            end
                          end

The code runs fine and shows an output I expect during assets:precompile. Excludes everything it should and includes everything it should.

The problem is the /public/assets directory never contains the css files for anything other then application.css. It’s missing red.css, blue.css, etc…

What am I overlooking?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The way the pipeline works for Javascript files and stylesheets is it’s only going to precompile an application.js and application.css file for you by default.
    This is why you have tried to append more assets to the config.assets.precompile Array. You’re on the right track, but have made a few mistakes.

    The File Extension

    You need to rename

    app/assets/stylesheets/themes/cool-theme/color-schemes/red.scss

    to

    app/assets/stylesheets/themes/cool-theme/color-schemes/red.css.scss

    This tells the pipeline that you want this to be a .css file when it’s finished compiling.

    The Asset Path

    Currently you’re appending a path like

    /Path/To/Your/app/assets/stylesheets/themes/cool-theme/color-schemes/red.scss

    to the config.assets.precompile Array. Instead you need to be passing a path in this format

    themes/cool-theme/color-schemes/red.css

    When you precompile your assets you’ll see a new themes folder created inside public/assets/ containing the rest of your directory tree, complete with a compiled red.css file.

    I’ll leave fixing your code for appending paths to the config.assets.precompile up to you as you seem more than capable of making the necessary changes outlined above.

    • 0