Covalent: Can't resolve './styles/font/styles/font/MaterialIcons-Regular-v48.woff2'

[ranouf]

packages

"@angular/animations": "~10.0.7",
"@angular/cdk": "~10.1.1",
"@angular/common": "~10.0.7",
"@angular/compiler": "~10.0.7",
"@angular/core": "~10.0.7",
"@angular/forms": "~10.0.7",
"@angular/material": "^10.1.1",
"@angular/platform-browser": "~10.0.7",
"@angular/platform-browser-dynamic": "~10.0.7",
"@angular/router": "~10.0.7",
"@auth0/angular-jwt": "^5.0.1",
"@covalent/core": "^3.0.1",
"angular2-notifications": "^9.0.0",
"bootstrap": "^4.5.0",
"hammerjs": "^2.0.8",
"module": "^1.2.5",
"npm-check-updates": "^7.0.2",
"rxjs": "~6.6.2",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"

styles.scss:

// Angular Material + Coavalent
@import '~@angular/material/theming';
@import '~@covalent/core/theming/all-theme';

// Define a custom typography config that overrides the font-family
// or any typography level.
$typography: mat-typography-config( $font-family: 'Roboto, monospace', $headline: mat-typography-level(32px, 48px, 700) );

@include mat-core($typography); // $typography is an optional argument for the mat-core

$primary: mat-palette($mat-orange, 800, 100, 900);
$accent: mat-palette($mat-light-blue, 600, 100, 900);

$warn: mat-palette($mat-red, 600, 100, 900);

$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);
@include covalent-theme($theme, $typography); // $typography is an optional argument for the covalent-theme

When I launch the server, I got this error:

ERROR in ./node_modules/@covalent/core/common/platform.scss (./node_modules/css-loader/dist/cjs.js??ref--14-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--14-3!./node_modules/sass-loader/dist/cjs.js??ref--14-4!./node_modules/@covalent/core/common/platform.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\xx\source\repos\Leav-Web\src\client\styles\font_font.scss:8:4: Can't resolve './styles/font/styles/font/MaterialIcons-Regular-v48.woff2' in 'C:\Users\XX\source\repos\Leav-Web\src\client\node_modules\@covalent\core\common'

6 | font-style: normal;
7 | font-weight: 400;

8 | src: url($mat-font-url+'MaterialIcons-Regular-v48.woff2') format('woff2');
| ^
9 | }
10 | .material-icons {

What do you suggest?

[smurfy]

Covalent is not yet material 10 compatible

[nanitohb]

I have the same problem but with "@angular/material": "^9.2.4" and "@covalent/core": "^3.0.1", i see the line in error:

CssSyntaxError: C:\Users\xx\source\repos\Leav-Web\src\client\styles\font_font.scss:8:4: Can't resolve './styles/font/styles/font/MaterialIcons-Regular-v48.woff2'

And the part './styles/font/styles/font....' appears to be duplicate, so i went to .../node_modules/@covalent/core/common/styles/font/_font.scss and in the first line change:

this: $mat-font-url: 'styles/font/' !default;
for: $mat-font-url: '' !default;

And worked for me, no more error.

[nanitohb]

This error looks like _font.css was in ".../node_modules/@covalent/core/common/" and was moved into ".../node_modules/@covalent/core/common/styles/font/" without change the $mat-font-url, the file MaterialIcons-Regular-v48.woff2 is in ".../node_modules/@covalent/core/common/styles/font/" too.

[ArminAg]

Same issue here, and it looks like exactly like you described (file moved without url update).

btw this also works: $mat-font-url: '/styles/font/' !default;

But this is not a solution as it is not possible to run build in pipelines.

Any news regarding this? Seems like a quick fix.

Thank you

[bandman0226]

We are experiencing the same thing. I can fix it to run locally but out build will error out.

[jessevandenbossche]

I'm experiencing the same issue. I've fixed it for now using https://www.npmjs.com/package/patch-package to patch it post install...

[ranouf]

Hi,

Any updates?

I saw that Covalent is now compatible to Angular 11, but I continue to have the issue on a fresh install.

[ranouf]

@ArminAg where did you $mat-font-url: '/styles/font/' !default;?

I put at first line of styles.scss but I still have the issue

[kthy]

@ranouf

1. You have to do $mat-font-url: '' !default; without the /styles/font/
2. You hotfix it by changing the first line in node_modules/@covalent/core/common/styles/font/_font.scss. If you're running CI you'll need to monkey-patch it after an install, e.g. using patch-package as @jessevandenbossche said:

$ yarn add patch-package postinstall-postinstall --dev
( make the change )
$ yarn patch-package @covalent/core

It's important to make the change after installing patch-package, since yarn will clobber the change when installing packages.

[smurfy]

I finally was able to use it with angular 11 without any manual patching.

I basically followed this guide: https://teradata.github.io/covalent/v3/#/docs/theming/sass-mixins

Which resulted in REMOVING the include of platform.scss from angular.json.

And adding this to my styles.scss above @include mat-core($typography);

$mat-font-url: './';

@include covalent-core();
@include covalent-material-icons();
@include covalent-utilities();
@include covalent-layout();
//@include covalent-colors(); // if you use the colors