时间戳

首页 > 解决方案 > 以 Angular 10 构建项目并使用 scss 作为我的样式构建器。但是在添加了很棒的字体之后，我遇到了一个错误

node.js - 以 Angular 10 构建项目并使用 scss 作为我的样式构建器。但是在添加了很棒的字体之后，我遇到了一个错误

问题描述

这是我从文件中导入变量的样式/scssvariables.scss文件：

 @import '@angular/material/prebuilt-themes/deeppurple-amber.css'; 
 @import 'variables';
 @import '../node_modules/font-awesome/scss/font-awesome';
    
//some basic resets 

 body {
        padding:0; 
        margin:0; 
        font-family: Roboto, sans-serif; 

}

.container {
        margin: 20px; 
        display:flex;
        flex-direction: column;
}

这是我的variables.scss文件：

$fa-font-path : '../node_modules/font-awesome/fonts';

标签： node.jssassfont-awesomeangular10

解决方案

好的，所以我有一个解决方法。我错误地为#font Awesome 编写了我的导入。

这就是我最初所拥有的。

@import '@angular/material/prebuilt-themes/deeppurple-amber.css'; 
@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

但是，经过一些角度更新后，不再支持这种调用 font awesome 的方式，并且会产生错误。因此，这就是实际调用 font-awesome 的方式。

  /* You can add global styles to this file, and also import other style files */
  @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
  @import 'variables';
  @import '../node_modules/font-awesome/scss/_variables.scss';

因此，有修复。

推荐阅读