如何使用npm将Font Awesome添加到我的Aurelia项目中？

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

问题描述

我一直关注教程，并希望将 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

在 dependencies 数组下的 aurelia.json 中添加以下内容> vendor-bundle.js ：

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:

为什么要查找 .js 文件？

推荐答案

不要将字体真棒资源添加到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.

在文件夹<$ c中添加新文件 prepare-font-awesome.js $ c> \ aurelia_project \tasks 并插入以下代码。它将font-awesome资源文件复制到输出文件夹（如配置 aurelia.json 配置文件;例如脚本）：

Add new file prepare-font-awesome.js in folder \aurelia_project\tasks 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);
}

打开 build.js 在 \ aurelia_project \tasks 文件夹中输入并插入以下两行;这将导入新函数并执行它：

Open the build.js file in the \aurelia_project\tasks 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
);

最后，在< head> 您的 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文件）中使用font-awesome图标。

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项目中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！