angular - 如何使用 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

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

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

2. 之后转到 webpack.config.vendor.js 并在非 tree shakable 模块下的数组中添加 font awesome:

   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