Vue CLI + Font Awesome 5 Production Build - No Icons (Font Awesome\ 5 Free)

Question

I have a working Vue CLI project and the dev build works fine - I can see all of my Font Awesome icons with no problem whatsoever.

However, when I run a prod builds all my icons are replaced with squares containing character codes (The styles rendered in the :before pseudo tags.

In digging into the compiled CSS I've found that, in the prod build, the Font Awesome SCSS is being complied from this...

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

.far {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
}

into this...

@font-face{font-family:Font Awesome\ 5 Free;font-style:normal;font-weight:900;src:url(/fonts/fa-solid-900.eot);src:url(/fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(/fonts/fa-solid-900.woff2) format("woff2"),url(/fonts/fa-solid-900.woff) format("woff"),url(/fonts/fa-solid-900.ttf) format("truetype"),url(/fonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:Font Awesome\ 5 Free}.fa,.fas{font-weight:900}

EDIT: For a while I thought it was this but it was a red herring...

font-family: 'Font Awesome 5 Free' => Font Awesome \5 Free

The font-family name is now wonky - Not the end of the world but - ick!

EDIT: The REAL problem was...

What's more serious is that the path matching doesn't work.

The paths given are '/fonts/' but, in my app, my root is 'myapp/things/' and it seems to ignore that. If I put the full path into the $fa-font-path variable then the app won't compile. If I set it to what it is currently...

@import "~@fortawesome/fontawesome-free/scss/fontawesome";

$fa-font-path: "~/fonts";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

...then it only works on the dev server. Errrrrr.

I'm at a loss as to how to fix this - Can anyone advise me on why this happens and what I can do about it?

Answer 1

I fixed this in the end. Firstly I removed the variable set up in my vendor index.scss...

@import "~@fortawesome/fontawesome-free/scss/fontawesome";

//$fa-font-path: "~/fonts"; SET IN vue.config.js
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

...and instead set up the variable as data in vue.config.js...

css: {
    modules: false,
    sourceMap: process.env.NODE_ENV !== 'production',
    loaderOptions: {
        sass: {
            data: `
                $fa-font-path: ${process.env.NODE_ENV !== 'production' ? '"~/fonts"' : '"/myapp/things/fonts"'};
                @import "@/scss/base/index.scss";
                @import "@/scss/helpers/index.scss";
            `
        }
    }
},

Slightly icky for my tastes, but it works.