Aurelia - 在webpack asp.net aurelia项目中添加Font-Awesome

Question

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

我看到this SO question但是我没有aurelia.json文件。这似乎也是this SO question的要求。

它似乎不像通过npm添加它那么简单。

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

Answer 1

好吧，所以事实证明这是一件很难找到的事情，但在一天结束时，答案实际上是一个简单的两个班轮。

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

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

• 1）npm安装你想要使用的字体版本。
• 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在过去几个月中已经发生了很大变化。

以上答案可能不再适用。请检查my answer here是否有基于webpack的aurelia-cli生成的项目。