CODEWITHSUNDEEP
cssangularfontsfont-awesome
Ayub Jamal
Ayub Jamal

Reputation: 173

Angular Compile time Error: Failed to find 'node_modules/font-awesome/css/font-awesome.css'

I'm facing a compile-time error. The font-awesome folder is present in node modules, but still on compiling I get compile-time error. My angular.json looks like this:

         "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"]
      }
    },

I have imported font-awesome like this:

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

can anyone let me know what exactly, I'm missing?

Upvotes: 1

Views: 1780

Answers (1)

Suneet Bansal
Suneet Bansal

Reputation: 2702

Try to import SCSS version -

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

You also need to define font path -

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

Also in angular.json, below change needed -

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

Note - SCSS var have to be defined before the @import statement.

Upvotes: 1

Related Questions