如何使用 npm 将 Font Awesome 添加到我的 Aurelia 项目中? [英] How can I add Font Awesome to my Aurelia project using npm?

查看:29
本文介绍了如何使用 npm 将 Font Awesome 添加到我的 Aurelia 项目中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在关注 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.jsdependencies数组下的aurelia.json中添加以下内容:
  • npm install Font-Awesome --save
  • Added the following to aurelia.jsonunder the dependencies array of the vendor-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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆