Question

我在 Angular 6 项目中使用sass进行样式设置，现在我希望能够通过在Component声明中使用styleUrls: ['./filename.scss']来使用特定于组件的样式设置，而不仅仅是全局sass文件。

因此，我按照these instructions的要求在webpack中工作，除了一件事之外，它工作正常：CSS content属性中的字体很棒。基本上，我有一个具有以下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开发人员已禁用它：/

Answer 2

您是否尝试过导入

@import '~@fortawesome/fontawesome-free/css/all.css';

然后删除

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";

希望这行得通！

Answer 3

您可以使用这个。

https://www.npmjs.com/package/angular2-fontawesome

您可以将此样式包含在styles.scss文件或angular.json文件中

  "../../node_modules/font-awesome/css/font-awesome.css"

此模块具有用于fontawsome的自己的组件，但是您也可以像这样使用它。

<i fa [name]="'rocket'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket"></i>

两个作品

使用Angular组件样式的Sass中的字体真棒内容

3 个答案: