Asset Pipeline in Rails 5.md

#Rails 5 Asset Pipeline

##Solution Use this gem: https://github.com/heroku/rails_12factor

##Why/What does this gem do? Read here: heroku/rails_12factor#3

##Why use SCSS for Rails 5 apps? Rails comes equipped with Sass by default. (It's in the Gemfile)

In Gemfile:

# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'

• Can you use CSS and SCSS for Rails 5 app?

#application.css -Master stylesheet in the Rails Asset Pipeline

In app/assets/stylesheets/application.css

  *= require_self
  *= require_tree .

-Means CSS in application.css will overwrite any other CSS, including imported CSS

Organizing CSS & SASS in Rails: http://www.mattboldt.com/organizing-css-and-sass-rails/

#From Rails Guide The asset pipeline is implemented by the sprockets-rails gem, and is enabled by default. You can disable it while creating a new application by passing the --skip-sprockets option.

• In application.css.erb

.class { background-image: url(<%= asset_path 'image.png' %>) }

"If this image is already available in public/assets as a fingerprinted file, then that path is referenced."

2.3.2 CSS and Sass When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

image-url("rails.png") returns url(/assets/rails.png) image-path("rails.png") returns "/assets/rails.png" The more generic form can also be used:

asset-url("rails.png") returns url(/assets/rails.png) asset-path("rails.png") returns "/assets/rails.png"

4.3 Live Compilation In some circumstances you may wish to use live compilation. In this mode all requests for assets in the pipeline are handled by Sprockets directly.

To enable this option set:

config.assets.compile = true

Since jQuery is the default JavaScript library from Rails 3.1 onwards, you don't need to copy jquery.js into app/assets and it will be included automatically.

#Remaining Questions Where is background-image property in inspect? http://lyricallychallenged.herokuapp.com/ Max: As a minified file somewhere in your sources.

Thank you for this, worked for me