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

【问题标题】：Aurelia - Adding Font-Awesome to a webpack asp.net aurelia projectAurelia - 将 Font-Awesome 添加到 webpack asp.net aurelia 项目
【发布时间】：2019-04-02 14:21:32
【问题描述】：

我正在使用 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 的过程是什么？

【问题讨论】：

我也在努力解决它......到目前为止，我的模板中的“

标签： aurelia

【解决方案1】：

好的，结果证明这是一件苦差事，但归根结底，答案实际上是一个简单的两个班轮。

我查看了许多解决方案，尝试了许多不同的东西，但我一次又一次地得到显然是 web-pack 的东西，无视我的规则，只是试图加载它喜欢的东西。

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

1) npm install the version of 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 模板一起使用，就像这个一样。

我怀疑正如其他人所说，这与正则表达式有关。

还有一点需要注意。

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

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

【讨论】：

【解决方案2】：

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

以上答案可能不再有效。请查看my answer here 获取基于 webpack 的 aurelia-cli 生成项目。

【讨论】：