如何使用 ASP.NET.Core Angular 模板添加很棒的字体

Question

我正在使用 NET.Core 2.0 Angular 模板，它与 webpack、angular-cli、angular 组件、typescript 一起使用。

我做到了：

命令行 - 安装包和加载器

npm install --save font-awesome
npm install url-loader --save-dev

webpack.config.js - 添加加载器规则

    module: {
        rules: [
             ...
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" }
        ]
    },    

my.component.css - 导入到我的组件

@import '~font-awesome/css/font-awesome.css';

my.component.html - 放置图标

<i class="fa fa-check fa-6"></i>

---

现在我没有收到错误消息，但仍然看不到图标。

我做错了吗？

Answer 1

谢谢大家的帮助~

最终我通过将 webpack.config.js 更新为：

解决了这个问题：

module: {
  loaders: [
    {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader"
    },
    {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader"
    }
  ]
}

而不是放在rules: [...]

rules 不起作用很奇怪……但无论如何~：P

Answer 2

也许我是唯一一个像npm install fontawesome --save 这样安装了font-awesome 的人？好吧，它应该像npm install font-awesome --save。该死！

Answer 3

这适用于 .NET Core 2，在您使用 dotnet new angular 创建 SPA 项目后：

1. 进入项目根目录并安装包：npm install font-awesome --save。您现在应该在 package.json 依赖项中看到它。

2. 之后转到webpack.config.vendor.js 并将字体真棒添加到不可摇树模块下的数组中：

   const nonTreeShakableModules = [
       'bootstrap',
       'bootstrap/dist/css/bootstrap.css',
       'es6-promise',
       'es6-shim',
       'event-source-polyfill',
       'font-awesome/css/font-awesome.css',
       'jquery',
   ];
   

3. 现在我们需要告诉 webpack 我们添加了这个新包。因此，如果您在使用 npm install --save-dev npm-install-webpack-plugin 将其安装到项目的根目录之前还没有这样做。

4. 最后，在项目根目录下运行这个命令：webpack --config webpack.config.vendor.js