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

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

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

在查看了许多其他堆栈溢出帖子并花了几个小时在我的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

超赞的字体安装对新版本进行了一些更改。此外，在过去的几个月中，aurelia-cli发生了变化并有所改善。

以上答案可能不再起作用。请检查my answer here中基于webpack的aurelia-cli生成的项目。

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

2 个答案: