Angular编译时错误:找不到'node_modules/font-awesome/css/font-awesome.css‘

Question

我正面临一个编译时错误。font- folder文件夹存在于node模块中，但在编译时仍然会出现编译时错误。我的angular.json看起来像这样：

         "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/font-awesome/css/font-awesome.min.css",
          "src/styles/theme.scss",
          "src/styles/layout.scss",
          "src/styles/common.scss",
          "src/styles/material.scss",
          "src/styles/printfile.scss"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
           "node_modules/bootstrap/dist/js/bootstrap.min.js"


        ],
        "assets": ["src/favicon.ico", "src/assets"]
      }
    },

我导入了字体-很棒，如下所示：

    $fa-font-path: "../node_modules/font-awesome/fonts";
    @import "node_modules/font-awesome/css/font-awesome.css";

有没有人能告诉我我到底遗漏了什么？

Answer 1

尝试导入SCSS版本-

@import "~font-awesome/scss/font-awesome.scss";

您还需要定义字体路径-

$fa-font-path: "~font-awesome/fonts";

同样在angular.json中，下面需要更改-

"styles": [
        "assets/sass/global/loading.css",
        "node_modules/font-awesome/scss/font-awesome.min.scss", 
        "styles.scss"
      ]

注意- SCSS var必须在@import语句之前定义。