Aurelia

Question

我正在使用 ASP.NET Core 2，最新的 Aurelia/Aurelia CLI，我一直在寻找安装 Font-Awesome 的方法，但这似乎并不那么简单。

我也看到了 however I do not have an aurelia.json file. This appears to also be a requirement in

好像不是通过npm添加那么简单。

鉴于我有一个 ASP.NET 2 项目，Webpack 并且没有 aurelia.json 文件（我确实有一个 package.json 如果那是他们所指的）包含字体的过程是什么在这方面很棒？

Answer 1

好的，结果证明这是一件很麻烦的事情，但最终，答案实际上是一个简单的两行代码。

我查看了很多解决方案，尝试了很多不同的东西，但我一次又一次地得到显然是 web-pack 的东西，忽略了我的规则，只是想随心所欲地加载东西。

在查看了许多其他堆栈溢出帖子并花了好几个小时尝试我的 webpack.config.js 文件（以及由 dotnet core 2 模板生成的供应商文件）中的不同位之后，我最终得出以下结论：

1) npm 安装您希望使用的 font awesome 版本。
2) 在您的 app.html 文件中，确保它看起来如下所示：

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

  ... rest of your html here ... 

</template>

3) 编辑您的 webpack.config.js 文件，使您的规则部分如下所示（这是最重要的部分）

    module: {
      rules: [
        { test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
        { test: /\.html$/i, use: 'html-loader' },
        { test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
        { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
        { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' }
      ]
    },

如果您有其他需要保留的规则，那么您需要合并它们并确保没有重复的规则，或类似的东西。

这是与此处其他答案类似的答案，但我发现其他答案似乎不适用于 dotnet core 2 spa 模板，而这个模板可以。

我怀疑正如其他人所说，这与 reg-ex 有关。

还有一点需要注意。

如果你查看 webpack.vendor.config.js ，你会发现那里已经有一条规则来处理字体文件，但似乎被忽略了但是一个简单的非版本化静态包含文件来覆盖一般字体，所以我把我的留在里面了。

改变现有的似乎也不起作用。

Answer 2

font-awesome 安装在新版本中发生了一些变化。此外，aurelia-cli 在过去几个月中发生了很大的变化和改进。

以上答案可能不再有效。请检查基于 webpack 的 aurelia-cli 生成的项目。

Aurelia - 将 Font-Awesome 添加到 webpack asp.net aurelia 项目

Aurelia - Adding Font-Awesome to a webpack asp.net aurelia project