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 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。

我对如何解决这个问题不知所措-有人可以告诉我为什么会发生这种情况以及对此我该怎么做吗？

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 Production Build-无图标（Font Awesome \ 5免费）

1 个答案: