使用npm安装字体awesome5以获取scss用法

就像标题所说的那样,我无法使用npm安装字体awesome 5用于scss目的.

尝试安装第5版

根据https://fontawesome.com/how-to-use/use-with-node-js

npm i --save @fortawesome/fontawesome

查看node_modules中的安装,我看不到要连接的scss文件.我尝试在我的app.scss文件中包含styles.css文件,但这不起作用.

我的版本4的设置:

的package.json "font-awesome": "^4.7.0",

app.scss @import "node_modules/font-awesome/scss/font-awesome.scss";

用法

非常简单.我如何用版本5实现这一点？我使用了错误的包装吗？

---

UPDATE

显然,只使用@ fortawesome/fontawesome并不是真的.这些包已被拆分,因此您还必须选择 npm install --save @fortawesome/fontawesome-free-regular Still我没有成功导入它

1> Ru Chern Cho..：

---

npm install --save-dev @fortawesome/fontawesome
npm install --save-dev @fortawesome/free-regular-svg-icons
npm install --save-dev @fortawesome/free-solid-svg-icons
npm install --save-dev @fortawesome/free-brands-svg-icons

在您app.js或等效的Javascript文件中,

import fontawesome from '@fortawesome/fontawesome'
import regular from '@fortawesome/free-regular-svg-icons'
import solid from '@fortawesome/free-solid-svg-icons'
import brands from '@fortawesome/free-brands-svg-icons'

fontawesome.library.add(regular)
fontawesome.library.add(solid)
fontawesome.library.add(brands)

对于使用,类名的使用方式略有变化.请参阅Fontawesome网站上的图标以获取"完整"类名称.

例

---

虽然将所有3种字体添加到项目中的想法似乎是一件很方便的事情,但要注意这会在构建/编译项目时降低性能.因此,强烈建议您添加所需的字体而不是所有字体.

---

我像OP一样感到困惑,并且已经达到了我已经成功导入Font Awesome 5的程度.现在我有一个问题,也许你知道答案:在编译我的`app.js`(使用Laravel Mix/webpack)时,输出文件大约为2 MB!我只导入一个Font Awesome图标集(`fontawesome-pro-regular`)并将其添加到我的`app.js`中的`fontawesome.library`.由于他们声明[这里](https://fontawesome.com/how-to-use/use-with-node-js#using-the-library),`fontawesome.library`功能是明确不导入所有图标,为什么文件变得如此之大？