我使用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>
现在我没有收到任何错误消息,但仍然无法看到图标。
我做错了什么吗?
答案 0 :(得分:10)
在使用dotnet new angular
:
转到项目的根目录并安装包: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
答案 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
一样。该死!