作者:一切近乎完美 | 来源:互联网 | 2022-11-29 11:35
我在Angular 6项目中使用sass进行样式化,现在我希望能够通过styleUrls: ['./filename.scss']
在Component声明中使用特定于组件的样式,而不是仅使用全局sass文件.
所以我按照这些说明在webpack中工作,除了一件事之外它工作正常:CSS content
-property 中的字体很棒.基本上,我有一个包含以下SCSS的组件:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
.myelement {
&:after {
@include fa-icon;
@extend .fas;
content: fa-content($fa-var-angle-down);
}
}
我的Webpack看起来像这样:
module: {
rules: [
{
test: /\.scss$/,
exclude: /node_modules/,
use: ['raw-loader', 'sass-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts'
}
}]
},
...
]
}
这与webpack编译得很好,但我在浏览器控制台中出错并且图标被替换为正方形.
在Firefox中我收到以下错误:
downloadable font: rejected by sanitizer
(font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:1)
source: https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
在Chrome中我得到:
Failed to decode downloaded font:
https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
如何在特定于组件的sass文件中包含字体?