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

时间:2017-09-05 10:20:52

标签: angular webpack asp.net-core asp.net-core-2.0

我使用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>

现在我没有收到任何错误消息,但仍然无法看到图标。

我做错了什么吗?

3 个答案:

答案 0 :(得分:10)

在使用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

答案 1 :(得分: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

答案 2 :(得分:2)

也许我是唯一一个像npm install fontawesome --save那样安装字体真棒的人?好吧,它应该像npm install font-awesome --save一样。该死!