代码之家 › 专栏 › 技术社区 › Keith Jackson

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

vue-cli-3 font-awesome vuejs2 webpack

Keith Jackson · 技术社区 · 5 年前

但是,当我运行prod构建时,我的所有图标都被包含字符代码的正方形(在:before伪标记中呈现的样式)替换。

在深入研究已编译的CSS时,我发现,在prod构建中,字体Awesome scs是从以下内容编写的。。。

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

…那么它只能在dev服务器上工作。呃,呃。

我不知道如何解决这个问题-有人能告诉我为什么会这样,我能做些什么吗?

1 回复 | 直到 5 年前

Keith Jackson 5 年前

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