Font Awesome overwrite to set the correct font path in Ruby On Rails and work in Production

font-awesome-overwrite.scss

/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */

@import "font-awesome/scss/variables";
/* FONT PATH VARIABLE
 * -------------------------- */
$fa-font-path: "font-awesome/fonts/";
/* -------------------------- */

@import "font-awesome/scss/mixins";
// @import "font-awesome/scss/path"; // OVERWRITE

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
//  src: font-url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}
/* -------------------------- */

@import "font-awesome/scss/core";
@import "font-awesome/scss/larger";
@import "font-awesome/scss/fixed-width";
@import "font-awesome/scss/list";
@import "font-awesome/scss/bordered-pulled";
@import "font-awesome/scss/animated";
@import "font-awesome/scss/rotated-flipped";
@import "font-awesome/scss/stacked";
@import "font-awesome/scss/icons";
@import "font-awesome/scss/screen-reader";

How to use: Ruby on Rails + Yarn + Font Awesome in Produciton, final solution

Final solution? I wish. I had to use font_url -- https://stackoverflow.com/a/28968635/419017