Vue CLI + Font Awesome 5 Production Build - без значков (Font Awesome \ 5 Free) - PullRequest
Новая
       32

Vue CLI + Font Awesome 5 Production Build - без значков (Font Awesome \ 5 Free)

0 голосов
/ 18 января 2019

У меня есть работающий проект Vue CLI, и сборка dev работает нормально - я вижу все свои иконки Font Awesome без проблем.

Однако при запуске сборок prod все мои иконки заменяются квадратами, содержащими коды символов (стили, представленные в псевдо-тегах: before.

При копании в скомпилированном CSS я обнаружил, что в сборке prod Font Awesome SCSS выполняется из этого ... 

@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;
}

в это ... 

@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}

РЕДАКТИРОВАТЬ: Некоторое время я думал, что это было, но это была красная сельдь ...

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

Название семейства шрифтов теперь вонючее - Не конец света, а - Ик!

РЕДАКТИРОВАТЬ: Реальная проблема была ...

Что более важно, так это то, что сопоставление путей не работает.

Указаны пути '/ fonts /', но в моем приложении мой корень - 'myapp / things /', и, похоже, это игнорируется. Если я введу полный путь в переменную $ fa-font-path, приложение не скомпилируется. Если я установлю его на то, что он в настоящее время ... 

@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";

... тогда это работает только на сервере разработки. Errrrrr.

Я в растерянности относительно того, как это исправить - Может кто-нибудь посоветовать мне, почему это происходит и что я могу с этим поделать?

1 Ответ

0 голосов
/ 18 января 2019

Я исправил это в конце. Во-первых, я удалил переменную, установленную в моем 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";

... и вместо этого установите переменную как данные в 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";
            `
        }
    }
},

Немного неприглядный, на мой вкус, но это работает.

...