使用Angular组件样式的sass中的字体很棒的内容

Question

我在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文件中包含字体？

Answer 1

虽然不是最优的，但我通过完全转向 Angular CLI 并放弃手动 webpack 配置解决了这个问题。我希望我可以这样做ng eject并获得最终的 webpack 配置，但看起来 Angular 开发人员已经禁用了它：/