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

Question

我正在使用NET.Core 2.0 Angular模板,它与webpack,angular-cli,angular component,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

在使用dotnet new angular以下命令创建SPA项目之后,这适用于.NET Core 2 :

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

Answer 2

谢谢各位的帮助~

最终我通过将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