Vue CLI + Font Awesome 5 生产版本 - 无图标（Font Awesome\ 5 免费）

Question

我有一个工作的 Vue CLI 项目，开发构建工作正常 - 我可以毫无问题地看到我所有的 Font Awesome 图标。

但是，当我运行构建产品时，我所有的图标都被替换为包含字符代码的方块（在 :before 伪标签中呈现的样式。

在深入研究编译后的 CSS 时，我发现在产品构建中，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 Free

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

编辑： 真正的问题是...

更严重的是路径匹配不起作用

给出的路径是“/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";

...那么它只适用于开发服务器。错误。

我不知道如何解决这个问题 - 谁能告诉我为什么会发生这种情况以及我能做些什么？

Answer 1

最后我解决了这个问题。首先，我删除了供应商中设置的变量 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";
            `
        }
    }
},

我的口味有点恶心，但它有效。

Vue CLI + Font Awesome 5 生产版本 - 无图标（Font Awesome\ 5 免费）

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

font-awesome

webpack

vuejs2

vue-cli-3