堆栈内存溢出
  繁体   English   中英

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

[英]How can I add Font Awesome to my Aurelia project using npm?

 原文  2016-09-01 12:21:51  2   8    javascript/ font-awesome/ aurelia/ aurelia-framework

问题描述

我一直在关注Contact Manager教程，并希望将Font Awesome添加到项目中。 这是我到目前为止所做的：

  • npm install Font-Awesome --save
  • 在vendor-bundle.js的dependencies数组下的aurelia.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文件？

8 个解决方案

解决方案1
 53 已采纳  2016-09-17 08:21:07

不要将字体真棒资源添加到aurelia.json - 你也需要字体文件，Aurelia不会处理。 而是采取以下步骤。

首先，如果你已经为aurelia.json文件添加了font-awesome的任何内容，请再次删除它。

在文件夹\\aurelia_project\\tasks添加新文件prepare-font-awesome.js并插入以下代码。 它将font-awesome资源文件复制到输出文件夹（如配置的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);
}

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

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文件的<head>部分中，只需添加以下行： 

<link rel="stylesheet" href="scripts/css/font-awesome.min.css">

就这样; 现在你可以在任何Aurelia视图模块（html文件）中使用font-awesome图标。

请注意，这适用于任何需要手动包含的资源的复杂第三方库。

解决方案2
 12  2017-07-19 15:39:18

简单的默认设置方法

以下是我用于将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）您需要在您自己的较少文件中引用较少的字体（我的名称为site.less），然后将@fa-font-path为您的自定义位置，而不是添加到捆绑中。 

@import "../node_modules/font-awesome/less/font-awesome.less";
@fa-font-path:   "fonts";

4）没有4，只要你有自己编译的等效site.css文件（使用导入），你就不需要添加任何其他内容。

解决方案3
 8  2016-09-01 17:56:03

有趣的是，我试图在今天早上做同样的事情。 这就是我在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>

解决方案4
 8  2016-10-27 10:38:28

实际上没有回答你如何使用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

  1. 获取您在此处邮寄的独特CDN链接： http ： //fontawesome.io/get-started/
  2. 在索引html文件的头部包含此链接
  3. 不要忘记删除您可能已经添加的所有内容以尝试使其正常工作：npm包（及其在package.json中的引用），aurelia.json文件中的引用，您可能创建的任何自定义任务，任何<require>标签，......

解决方案5
 6  2016-12-20 07:24:09

现在支持自动导入css / fonts。 

{
    "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。 如果你想在这里检查打字稿版本
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();
}

解决方案6
 3  2016-09-01 14:29:51

我相信bundles.dependencies部分用于引用JS库。

在您的情况下，将需要一些额外的工作。 根据Aurelia CLI文档，您也可以创建自己的生成器，这对我们来说非常方便。

添加一些新的路径到aurelia.json ： 

"paths": {
    ...
    "fa": "node_modules\\font-awesome",
    "faCssOutput": "src",
    "faFontsOutput": "fonts"
    ...
}

为css捆绑创建任务... au generate task fa-css

修改后的任务文件： aurelia_project\\tasks\\fa-css.js|ts 

import * as gulp from 'gulp';
import * as changedInPlace from 'gulp-changed-in-place';
import * as project from '../aurelia.json';
import {build} from 'aurelia-cli';

export default function faCss() {
    return gulp.src(`${project.paths.fa}\\css\\*.min.css`)
        .pipe(changedInPlace({firstPass:true}))
        /* this ensures that our 'require-from' path  
           will be simply './font-awesome.min.css' */
        .pipe(gulp.dest(project.paths.faCssOutput))
        .pipe(gulp.src(`${project.paths.faCssOutput}\\font-awesome.min.css`))
        .pipe(build.bundle());
};

...和另一个用于复制字体文件： au generate task fa-fonts

修改后的任务文件： aurelia_project\\tasks\\fa-fonts.js|ts 

import * as gulp from 'gulp';
import * as project from '../aurelia.json';

export default function faFonts() {
    return gulp.src(`${project.paths.fa}\\fonts\\*`)
        .pipe(gulp.dest(project.paths.faFontsOutput));
}

将以上新任务添加到aurelia_project\\tasks\\build.js|ts的构建过程中： 

export default gulp.series(
    readProjectConfiguration,
    gulp.parallel(
        transpile,
        processMarkup,
        processCSS,
        // custom tasks
        faCss,
        faFonts
    ),
    writeBundles
);

执行这些步骤后， au build应将font-awesome.min.css嵌入到scripts / app-bundle.js中，并将必要的字体文件复制到./fonts文件夹中。

最后要做的是在我们的html中要求font-awesome。 

<require from ="./font-awesome.min.css"></require>

解决方案7
 3  2017-05-16 11:47:38

你不需要更多这个：

在aurelia.json 

"dependencies": [
      "jquery",
      "text",
      {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist/",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "resources": [
          "css/bootstrap.min.css"
        ]
      },
      {
        "name": "font-awesome",
        "path": "../node_modules/font-awesome/css",
        "main": "",
        "resources": [
          "font-awesome.min.css"
        ]
      }
    ]
  }
],
"copyFiles": {
  "node_modules/font-awesome/fonts/fontawesome-webfont.woff": "fonts/",
  "node_modules/font-awesome/fonts/fontawesome-webfont.woff2": "fonts/",
  "node_modules/font-awesome/fonts/FontAwesome.otf": "fonts/",
  "node_modules/font-awesome/fonts/fontawesome-webfont.ttf": "fonts/",
  "node_modules/font-awesome/fonts/fontawesome-webfont.svg": "fonts/"
}

请参阅复制文件的设置部分

我希望能帮助你。

解决方案8
 2  2016-12-01 14:35:17

对于那些希望使用sass版本的font-awesome的人

1）安装font-awesome 

npm install font-awesome --save

2）将font-awesome的字体复制到项目根目录 

cp -r node_modules/font-awesome/fonts .

3）在aurelia css处理器任务中包含font-awesome sass目录 

# aurelia_project/tasks/process-css.js
export default function processCSS() {
  return gulp.src(project.cssProcessor.source)
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: [
        'node_modules/font-awesome/scss'
      ]
    }).on('error', sass.logError))
    .pipe(build.bundle());
};

4）在你的应用程序scss中导入font-awesome 

# src/app.scss    
@import 'font-awesome';

5）在你的HTML中要求你的应用程序scss 

# src/app.html
<template>
  <require from="./app.css"></require>
</template>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何导入我的React项目很棒的字体？ 如何使用 npm start 查看我的项目？ 使用`npm install font-awesome`时出错 如何将新字体真棒图标添加到我的 odoo 模块？ 如何在此代码博客模板代码中添加 Font Awesome 图标 使用Aurelia CLI时如何更改引导字体包含的URL相对于绝对 如何在Highcharts饼图中获取字体真棒图标的数据标签？ 如何在我的 React Native 项目中添加自定义 TTF 字体？ 如何在输入文本字段中添加超棒的字体？ 如何使用javascript和html动态地向按钮添加字体真棒图标？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM