Aurelia CLI 字体真棒

Question

我尝试了几种不同的解决方案，但没有一个适合我。

我正在使用 .NET Core、最新的 Aurelia/Aurelia CLI 和使用 npm install font-awesome --save 安装的 Font-Awesome。

解决方案 1：

新文件：文件夹 \aurelia_project\tasks 中的 prepare-font-awesome.js

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
);

在 html 中包含了很棒的字体

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

错误：

获取http://localhost:9000/scripts/css/font-awesome.min.css

解决方案 2：

更新了 aurelia.json

 {
    "name": "font-awesome",
    "path": "../node_modules/font-awesome/",
    "main": "",
    "resources": [
      "css/font-awesome.min.css"
    ]
  }

在 root/font-awesome/fonts 中添加字体文件

在 html 中包含了很棒的字体

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

错误：没有错误但图标不显示

解决方案 3：

更新 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();
}

更新了 aurelia.json

{
    "name": "font-awesome",
    "main":"",
    "path": "../node_modules/font-awesome",
    "resources": [
        "css/font-awesome.css",
        "/fonts/fontawesome-webfont.woff2",
        "/fonts/FontAwesome.otf",
        "/fonts/fontawesome-webfont.eot",
        "/fonts/fontawesome-webfont.svg",
        "/fonts/fontawesome-webfont.ttf"
    ]
}

在 html 中包含了很棒的字体

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

错误：

得到： http://localhost:9000/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 （与 woff 和 ttf 相同）

真的很奇怪，因为文件被复制了，而且url是正确的..

文件夹结构：

测试了几个不同的来源

我错过了什么？

我更喜欢 less 实现，这样我就可以在我的 master less 文件中导入 Font-Awesome。

Answer 1

根据讨论，由于您将项目托管在 wwwroot 文件夹中，因此您必须从那里获取文件的“获取”。
所以，如果你将你的字体文件移动到wwwroot/fonts/font-name.woff（或附近的某个地方），你应该是金色的。

Answer 2

如果您使用的是使用最新 (2019ish) aurelia cli 生成的基于 webpack 的项目，那么添加 fontawesome 或 bootstrap 非常简单。

第 1 步：安装 fontawesome

检查official docs here。为了完整起见，这里是免费版本的 npm 或 yarn 方式

//with npm
npm install --save-dev @fortawesome/fontawesome-free

// yarn
yarn add --dev @fortawesome/fontawesome-free

第 2 步：导入字体

在您的 main.js 或 main.ts 或 app.js 或 app.ts 中，它们都将同样有效，哪个更好？问问谷歌。

import '@fortawesome/fontawesome-free/css/all.min.css';

更简单的方法是将 CDN 版本添加到 index.esj 或 index.html 文件的头部

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.css" />

以上所有方法都同样适用，个人对于公共应用程序，由于浏览器缓存，我更喜欢 CDN 解决方案。