Easy way to a single css output file for Padrino framework when using SCSS (SASS)

All in all, it is not that bad since the master file that imports all the other .scss files is generated the way you would expect it, with all the collected and generated styles. However, it is a bit ugly to have all the other .css files in the stylesheets folder if they are not used. There are a few solutions and the best one would be to incorporate Sprockets into your application. Another solution is to skip the SCSS integration and run SASS outside of your application. An easy workaround is to modify the sass_initializer.rb file in the lib folder and make a manifest folder in the app/stylesheets/ folder.

# Modify the sass_initializer.rb file to look like this
module SassInitializer
  def self.registered(app)
    # Enables support for SASS template reloading in rack applications.
    # See http://nex-3.com/posts/88-sass-supports-rack for more details.
    # Store SASS files (by default) within 'app/stylesheets'.
    require 'sass/plugin/rack'
    Sass::Plugin.options[:template_location] = Padrino.root("app/stylesheets/manifest")
    Sass::Plugin.options[:css_location] = Padrino.root("public/stylesheets")
    Sass::Plugin.options[:style] = :compressed
    app.use Sass::Plugin::Rack
  end
end

In the manifest folder, just create a .scss file with the name of your choice, for example default.scss or app_name.scss. In this file import all the other .scss files like this.

# Import all the other .scss files using relative paths.
@import "../base/resets.scss";
@import "../base/base.scss";
@import "../layout/logotype.scss";
@import "../layout/flag.scss";
@import "../layout/layout.scss";
@import "../module/main-nav.scss";

Delete all the previous generated files in the stylesheets folder and restart the Padrino server. Refresh any page in your app and you should now only have one single .css files containing all the generated css. A very simple workaround to a small, but annoying problem.