Make sure vendored assets and stylesheets behave w/r/t asset pipeline

app/assets/stylesheets/avalon.scss

@@ -878,7 +878,7 @@ div.status-detail {
 .structure_add_to_playlist {
   float: right;
   height: 1.5em;
-  background: $blue url(add_to_playlist_icon.svg) no-repeat;
+  background: $blue image-url('add_to_playlist_icon.svg') no-repeat;
   background-position: 3px 0px;
   border-color: $blue !important;
   margin-top: -2px;

app/assets/stylesheets/mejs4_player.scss

@@ -1,5 +1,5 @@
 /*
- *= require mediaelement/mediaelementplayer.css
+ *= require mediaelement/mediaelementplayer.scss
  *= require mediaelement/plugins/quality.css
  *= require mejs4/mejs4_add_to_playlist.scss
  */

config/initializers/assets.rb

@@ -1,21 +1,21 @@
 # Be sure to restart your server when you modify this file.
 
-# Version of your assets, change this if you want to expire all your assets.
-Rails.application.config.assets.version = '1.0'
+Rails.application.config.assets.tap do |assets|
+  # Version of your assets, change this if you want to expire all your assets.
+  assets.version = '1.0'
 
-# Add additional assets to the asset load path
-# Rails.application.config.assets.paths << Emoji.images_path
+  # Add additional assets to the asset load path
+  # assets.paths << Emoji.images_path
 
-# Precompile additional assets.
-# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-# Rails.application.config.assets.precompile += %w( search.js )
+  # Precompile additional assets.
+  # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
+  # assets.precompile += %w( search.js )
 
-Rails.application.config.assets.precompile += %w( embed.css )
+  assets.precompile += %w( embed.css )
 
-# MediaElement 4 files
-Rails.application.config.assets.precompile += %w( mejs4_player.js )
-Rails.application.config.assets.precompile += %w( mejs4_player.scss )
-
-# MediaElement 2 files
-Rails.application.config.assets.precompile += %w( mejs2_player.js )
-Rails.application.config.assets.precompile += %w( mejs2_player.scss )
+  # MediaElement 4 files
+  assets.precompile += %w( mejs4_player.js mejs4_player.scss )
+  assets.precompile += Dir[Rails.root + 'vendor/assets/stylesheets/mediaelement/mejs-controls.*']
+  # MediaElement 2 files
+  assets.precompile += %w( mejs2_player.js mejs2_player.scss )
+end

vendor/assets/stylesheets/mediaelement/mediaelementplayer.css → vendor/assets/stylesheets/mediaelement/mediaelementplayer.scss

@@ -152,7 +152,7 @@ Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-h
 }
 
 .mejs__overlay-button {
-    background: url('mejs-controls.svg') no-repeat;
+    background: image-url('./mejs-controls.svg') no-repeat;
     background-position: 0 -39px;
     height: 80px;
     width: 80px;
@@ -170,7 +170,7 @@ Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-h
 .mejs__overlay-loading-bg-img {
     -webkit-animation: mejs__loading-spinner 1s linear infinite;
             animation: mejs__loading-spinner 1s linear infinite;
-    background: transparent url('mejs-controls.svg') -160px -40px no-repeat;
+    background: transparent image-url('./mejs-controls.svg') -160px -40px no-repeat;
     display: block;
     height: 80px;
     width: 80px;
@@ -227,7 +227,7 @@ Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-h
 }
 
 .mejs__button > button {
-    background: transparent url('mejs-controls.svg');
+    background: transparent image-url('./mejs-controls.svg');
     border: 0;
     cursor: pointer;
     display: block;
@@ -755,4 +755,4 @@ Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-h
     padding: 0 15px;
     width: 100%;
 }
-/* End: Error */
+/* End: Error */