css - 使用 scss 导入时 Font Awesome 不显示

Question

这是我在 laravel 全新安装的 app.scss 上的代码

//font-awesome
$fa-font-path:"../webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";

构建我的 app.css 后看起来像这样

src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?f9103ae53b2dbcb0a14605eebc90a2ce);
src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?f9103ae53b2dbcb0a14605eebc90a2ce) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?59ea9019c9b9bc4d83ab9783e830735c) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?686e245a4f1a9894d10a576655e932dd) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?b9c86e3abec102a2c9910dfac85c1c17) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?1eba168c1b8603ab4dd282f5633d4650) format("svg");

但是当我加载页面时，图标显示为白色方 block ，我在控制台上查看 我看到这个错误

http://localhost/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?686e245a4f1a9894d10a576655e932dd

这是有道理的，因为我的文件夹结构是这样的

public
-css
--app.css
-fonts
--vendor
---@fortawesome

如何更改加载的 Font Awesome 目录或以其他方式显示 Font Awesome 图标？

我尝试导入 cdn 版本，它的工作原理。但后来在部署时我们没有互联网支持，所以我需要一个地方来本地化 Font Awesome 。

谢谢。

更新: 我的 app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import "variables";
// Bootstrap
@import "~admin-lte/bower_components/bootstrap/dist/css/bootstrap.css";
// Font-awesome
//@import "~admin-lte/bower_components/font-awesome/scss/font-awesome.scss";
//font-awesome
$fa-font-path:"../webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
// Ionicons
@import "~admin-lte/bower_components/Ionicons/css/ionicons.css";
//admin-lte
@import "~admin-lte/dist/css/AdminLTE.css";
@import "~admin-lte/dist/css/skins/_all-skins.css";

我的节点模块结构

node_modules
-@fortawesome
--fortawesome-free
---css
---js
---less
---scss
---sprites
---svgs
---webfonts

Answer 1

最后我设法解决了这个问题。 首先我注意到有一个关于 web-pack 的错误 然后我更新网络包。

npm install web-pack-server --save-dev

然后我运行 npm install 来更新所有的依赖

之后我将 $fa-font-path: 添加到我的字体位置 然后就可以了..