如何使用 npm 将 Font Awesome 添加到我的 Aurelia 项目中? [英] How can I add Font Awesome to my Aurelia project using npm?
问题描述
我一直在关注 Contact Manager 教程,并希望将 Font Awesome 添加到项目中.这是我到目前为止所做的:
I have been following the Contact Manager tutorial and would like to add Font Awesome to the project. Here's what I have done so far:
npm install Font-Awesome --save
- 在
vendor-bundle.js
的dependencies数组下的aurelia.json
中添加以下内容:
npm install Font-Awesome --save
- Added the following to
aurelia.json
under the dependencies array of thevendor-bundle.js
:
...
{
"name": "font-awesome",
"path": "../node_modules/font-awesome",
"resources": [
"css/font-awesome.min.css"
]
},
...
但是在运行 au run --watch
时出现错误:
But when running au run --watch
I get the error:
错误C:Users ode_modulesfont-awesome.js
error C:Users ode_modulesfont-awesome.js
为什么要寻找 .js 文件?
Why is it looking for the .js file?
推荐答案
不要向 aurelia.json 添加字体很棒的资源 - 您还需要字体文件,而 Aurelia 不会处理这些文件.相反,请执行以下步骤.
Don't add font-awesome resources to aurelia.json - you'd need font files too, which Aurelia don't process. Instead, take the following steps.
首先,如果您已经在 aurelia.json
文件中添加了 font-awesome 的任何内容,请再次将其删除.
First, if you added anything for font-awesome already to your aurelia.json
file, remove it again.
在文件夹 aurelia_project asks
中添加新文件 prepare-font-awesome.js
并插入以下代码.它将字体很棒的资源文件复制到输出文件夹(如配置的 aurelia.json
配置文件;例如 scripts
):
Add new file prepare-font-awesome.js
in folder aurelia_project asks
and insert the below code. It copies font-awesome resource files to output folder (as configured aurelia.json
config file; e.g. scripts
):
import gulp from 'gulp';
import merge from 'merge-stream';
import changedInPlace from 'gulp-changed-in-place';
import project from '../aurelia.json';
export default function prepareFontAwesome() {
const source = 'node_modules/font-awesome';
const taskCss = gulp.src(`${source}/css/font-awesome.min.css`)
.pipe(changedInPlace({ firstPass: true }))
.pipe(gulp.dest(`${project.platform.output}/css`));
const taskFonts = gulp.src(`${source}/fonts/*`)
.pipe(changedInPlace({ firstPass: true }))
.pipe(gulp.dest(`${project.platform.output}/fonts`));
return merge(taskCss, taskFonts);
}
打开aurelia_project asks
文件夹下的build.js
文件,插入以下两行;这将导入新函数并执行它:
Open the build.js
file in the aurelia_project asks
folder and insert the following two lines; this will import the new function and execute it:
import prepareFontAwesome from './prepare-font-awesome'; // Our custom task
export default gulp.series(
readProjectConfiguration,
gulp.parallel(
transpile,
processMarkup,
processCSS,
prepareFontAwesome // Our custom task
),
writeBundles
);
最后,在 index.html
文件的 部分,添加以下行:
Finally, in the <head>
section of your index.html
file, just add the following line:
<link rel="stylesheet" href="scripts/css/font-awesome.min.css">
仅此而已;现在您可以在任何 Aurelia 视图模块(html 文件)中使用字体很棒的图标.
That's all; now you can use font-awesome icons in any Aurelia view modules (html files).
请注意,这适用于任何需要手动包含资源的复杂第三方库.
Note that this works for any complex third party library which requires resources which you have to manually include.
这篇关于如何使用 npm 将 Font Awesome 添加到我的 Aurelia 项目中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!