我一直在关注联系人管理器教程，并希望将Font Awesome添加到项目中。这是我到目前为止所做的：
npm install Font-Awesome --saveaurelia.json在 的依赖项数组下添加了以下内容vendor-bundle.js：...
{
"name": "font-awesome",
"path": "../node_modules/font-awesome",
"resources": [
"css/font-awesome.min.css"
]
},
...
但是在运行时au run --watch出现错误：
错误 C:\Users\node_modules\font-awesome.js
为什么要寻找.js文件？
不要将字体很棒的资源添加到 aurelia.json - 你也需要字体文件，Aurelia 不处理这些文件。相反，请执行以下步骤。
首先，如果您已经在aurelia.json文件中添加了 font-awesome 的任何内容，请再次将其删除。
prepare-font-awesome.js在文件夹中添加新文件\aurelia_project\tasks并插入以下代码。它将字体很棒的资源文件复制到输出文件夹（作为配置的aurelia.json配置文件；例如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夹中的文件，插入以下两行；这将导入新函数并执行它：
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文件部分，只需添加以下行：
<link rel="stylesheet" href="scripts/css/font-awesome.min.css">
就这样; 现在您可以在任何 Aurelia 视图module（html 文件）中使用字体很棒的图标。
请注意，这适用于任何需要您必须手动包含的资源的复杂第三方库。
以下是我用来将 Font-Awesome 引入使用 CLI 的 Aurelia 项目的 4 个简单步骤。
1) npm install font-awesome --save
2) 将 copyFiles 添加到 aurelia.json 的构建中
"build": {
"copyFiles": {
"node_modules/font-awesome/fonts/*": "/fonts/"
},
3) 将绑定添加到 aurelia.json 的依赖项数组
"dependencies": [
{
"name": "font-awesome",
"path": "../node_modules/font-awesome/css",
"main": "font-awesome.css"
},
4) 包含 css 文件的导入（我的位于 app.html 中）
<require from="font-awesome.css"></require>
================================================== ========================
当我从不同的位置提供我的文件时，我需要能够调整配置的字体位置。因此，如果您需要执行相同操作并指定存储字体的位置，则以下是所涉及的步骤。我正在使用 .less
1, 2) 同上。
3）您需要在自己的less文件（我的名为site.less）中引用font-awesome less文件，而不是添加到捆绑包中，然后将其设置@fa-font-path为您的自定义位置。
@import "../node_modules/font-awesome/less/font-awesome.less";
@fa-font-path: "fonts";
4）没有4，只要您已经site.css引用了自己的编译等效文件（使用导入），使用此方法就不需要添加任何其他内容。
有趣的是，我今天早上试图让同样的事情工作。这就是我在 aurelia.json 依赖项中必须做的所有事情：
{
"name": "font-awesome",
"path": "../node_modules/font-awesome/",
"main": "",
"resources": [
"css/font-awesome.min.css"
]
},
然后在我的 html 中，我有：
<require from="font-awesome/css/font-awesome.min.css"></require>
实际上并没有回答您关于如何使用 NPM在您的应用程序中集成 Font Awesome 的问题，但是有一种替代的、干净的方法可以在您的应用程序中获取它：使用 CDN。
正如其他答案中提到的，Aurlia 目前不支持使用 CLI 捆绑 js、css 和 html 以外的资源。关于这个主题有很多讨论，并且有几个，主要是hacky，解决方法，就像这里建议的一些。
Rob Eisenberg 说他计划将其正确集成到 Aurelia CLI 中，但他认为它的优先级较低，因为有一个简单的解决方法。引用他的话：
当然，有兴趣解决这个问题。但是，它的优先级低于 CLI 列表中的其他内容，部分原因是一个简单的链接标记将解决问题，并且比我们在 CLI 中解决此问题所需的工作要容易得多。
来源：https : //github.com/aurelia/cli/issues/248#issuecomment-254254995
<require>标签，...现在支持自动导入 css/字体。
{
"name": "font-awesome",
"path": "../node_modules/font-awesome/css",
"main": "font-awesome.css"
}
<require from="font-awesome.css"></require>
签出这个“问题” https://github.com/aurelia/cli/issues/249
快乐编码
我意识到/阅读评论这不会复制字体文件。这是一个更新的构建脚本 (es6)，它将复制任何资源并将文件夹添加到 git ignore。如果你想要typescript版本在这里检查
https://github.com/aurelia/cli/issues/248#issuecomment-253837412
./aurelia_project/tasks/build.js
import gulp from 'gulp';
import transpile from './transpile';
import processMarkup from './process-markup';
import processCSS from './process-css';
import { build } from 'aurelia-cli';
import project from '../aurelia.json';
import fs from 'fs';
import readline from 'readline';
import os from 'os';
export default gulp.series(
copyAdditionalResources,
readProjectConfiguration,
gulp.parallel(
transpile,
processMarkup,
processCSS
),
writeBundles
);
function copyAdditionalResources(done){
readGitIgnore();
done();
}
function readGitIgnore() {
let lineReader = readline.createInterface({
input: fs.createReadStream('./.gitignore')
});
let gitignore = [];
lineReader.on('line', (line) => {
gitignore.push(line);
});
lineReader.on('close', (err) => {
copyFiles(gitignore);
})
}
function copyFiles(gitignore) {
let stream,
bundle = project.build.bundles.find(function (bundle) {
return bundle.name === "vendor-bundle.js";
});
// iterate over all dependencies specified in aurelia.json
for (let i = 0; i < bundle.dependencies.length; i++) {
let dependency = bundle.dependencies[i];
let collectedResources = [];
if (dependency.path && dependency.resources) {
// run over resources array of each dependency
for (let n = 0; n < dependency.resources.length; n++) {
let resource = dependency.resources[n];
let ext = resource.substr(resource.lastIndexOf('.') + 1);
// only copy resources that are not managed by aurelia-cli
if (ext !== 'js' && ext != 'css' && ext != 'html' && ext !== 'less' && ext != 'scss') {
collectedResources.push(resource);
dependency.resources.splice(n, 1);
n--;
}
}
if (collectedResources.length) {
if (gitignore.indexOf(dependency.name)< 0) {
console.log('Adding line to .gitignore:', dependency.name);
fs.appendFile('./.gitignore', os.EOL + dependency.name, (err) => { if (err) { console.log(err) } });
}
for (let m = 0; m < collectedResources.length; m++) {
let currentResource = collectedResources[m];
if (currentResource.charAt(0) != '/') {
currentResource = '/' + currentResource;
}
let path = dependency.path.replace("../", "./");
let sourceFile = path + currentResource;
let destPath = './' + dependency.name + currentResource.slice(0, currentResource.lastIndexOf('/'));
console.log('Copying resource', sourceFile, 'to', destPath);
// copy files
gulp.src(sourceFile)
.pipe(gulp.dest(destPath));
}
}
}
}
}
function readProjectConfiguration() {
return build.src(project);
}
function writeBundles() {
return build.dest();
}