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

发布时间：2020-12-16 03:40:13 所属栏目：asp.Net 来源：网络整理

导读：我正在使用NET.Core 2.0 Angular模板,它与webpack,angular-cli,angular component,typescript一起使用. 我做了：命令行 – 安装包和加载程序 npm install --save font-awesomenpm install url-loader --save-dev webpack.config.js – 添加加载程序规则 mod

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

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

我做错了什么吗？

解决方法

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

>转到项目的根目录并安装包：npm install font-awesome –save.您现在应该在package.json依赖项中看到它.
>之后转到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',];

>现在我们需要告诉webpack我们添加了这个新包.因此,如果你没有这样做,那么在使用npm install –save-dev npm-install-webpack-plugin在项目的根目录中安装它之前.>最后,在项目的根目录中运行此命令：webpack –config webpack.config.vendor.js

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!