Angular 10, ERROR in ./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!

[CdUrna]

I found problem that in Angular 10 this fonts not work properly. In Angular 9 and other older version it works. Error log

ERROR in ./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/ziggurat/Desktop/tests/mixins.scss:17:8: Can't resolve '../../../../../fonts/roboto/Roboto-Bold.woff' in '/Users/ziggurat/Desktop/tests/AngularStopWatch-master/angular-stopwatch/node_modules/roboto-fontface/css/roboto/sass'

  15 |     @font-face {
  16 |         font-family: '#{$variant}-#{$type}';
> 17 |         src: url('#{$font-full-path}-#{$type}.woff2') format('woff2'),
     |        ^
  18 |              url('#{$font-full-path}-#{$type}.woff') format('woff');
  19 |     }

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-prototype": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/public",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/static",
              "src/favicon.ico",
              "src/manifest.json",
              "src/version/version.json",
              "src/version/version-admin.json"
            ],
            "styles": [
              "node_modules/@swimlane/ngx-datatable/index.css",
              "node_modules/@swimlane/ngx-datatable/themes/material.css",
              "node_modules/@swimlane/ngx-datatable/assets/icons.css",

              "src/assets/styles/custom-material-theme.scss",
              "src/assets/fonts/material-icons/material-icons.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/highcharts/highstock.js",
              "node_modules/highcharts/modules/map.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/postscribe/dist/postscribe.min.js",
              "node_modules/jspdf/dist/jspdf.min.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true,
              "ngswConfigPath": "src/ngsw-config.json",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "mock": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.mock.ts"
                }
              ]
            },
            "localhost": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.localhost.ts"
                }
              ]
            },
            "uat": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.uat.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular-prototype:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-prototype:build:production"
            },
            "mock": {
              "browserTarget": "angular-prototype:build:mock"
            },
            "localhost": {
              "browserTarget": "angular-prototype:build:localhost"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-prototype:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/highcharts/highstock.js",
              "node_modules/highcharts/modules/map.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/postscribe/dist/postscribe.min.js"
            ],
            "styles": [
              "node_modules/@swimlane/ngx-datatable/assets/icons.css",
              "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss",
              "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-medium.scss",
              "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss",
              "src/assets/styles/custom-material-theme.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "assets": [
              "src/assets",
              "src/static",
              "src/favicon.ico",
              "src/proxy.php"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "angular-prototype-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "angular-prototype:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angular-prototype",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "exa",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "exa"
    }
  },
  "cli": {
    "analytics": false
  }
}

package.json

{
  "name": "angular-stopwatch",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.0",
    "@angular/common": "~10.0.0",
    "@angular/compiler": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3",
    "roboto-fontface": "~0.10.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.0",
    "@angular/cli": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0-next.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "rxjs": "^6.5.5",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

[Sulasdeli]

Hi,

I solved this issue by overriding the value of $roboto-font-path, as shown below: $roboto-font-path: '~roboto-fontface/fonts'

Hope it helps.

[vmuresanu]

Hi @Sulasdeli,

Can you please provide more info. I've tried your solution and it didn't work (I've put it in styles.scss). Where do we have to override the original path, in app.scss, in styles.scss etc? And where do we have to use the $roboto-font-path variable? This is a main blocker as prod build and dev build fails because of the provided error. Note: Prod serve and dev serve do not fail (only show error at compile time as shown by the author).

Thanks.

[Sulasdeli]

Hi @vmuresanu,

I've added this to my styles.scss: /* Roboto Font */ $roboto-font-path: '~roboto-fontface/fonts'; @import '~roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss';

[vmuresanu]

@Sulasdeli,

I've added to my styles.scss the same snippet as you've provided but no luck :(. The error is still there

[Sulasdeli]

@vmuresanu

Did you make sure that the style sheet is not included elsewhere in the project (e.g. angular.json)?

[vmuresanu]

@Sulasdeli yep that's exactly what I was missing. Thanks a lot!!. Now the dev/prod build works. So to summarize:

1. Remove "input": "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss" from styles array in angular.json
2. Add following lines in styles.scss:

   $roboto-font-path: '~roboto-fontface/fonts';
   @import '~roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss'; (or/and any other roboto fontface scss files)

[BePo65]

Another way to overwrite the default value of '$roboto-font-path' is the use of "@use '...' with (..)" - see the sass website on variables.

Migrating from angular 8 to angular 9 I updated all the scss @imports in my current app to the 'new' syntax using @use (as IMHO this is the way sass recommends by now).

So my import of roboto now looks like:

@use 'roboto-fontface/css/roboto/sass/roboto-fontface' with (
  $roboto-font-path: '~roboto-fontface/fonts'
);