CODEWITHSUNDEEP
cssangularangular12
Sansara
Sansara

Reputation: 93

How to resolve CSS module error in angular 12

In my angular application after added below the font i am getting Module error.How to resolve this issue in angular.

app.component.css:

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("./assets/font/GraublauWebBold.woff") format("woff");
}

Error:

./src/app/app.component.css - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js): D:\project\star\src\app\app.component.css:7:43: Can't resolve './assets/font/GraublauWebBold.woff' in 'D:\project\star\src\app'

Upvotes: 1

Views: 10350

Answers (2)

Juan Vicente Berzosa Tejero
Juan Vicente Berzosa Tejero

Reputation: 3022

Have you check that "assest/font" exist?

Try "assets" instead of "assest":

src: url("./assets/font/GraublauWebBold.woff") format("woff");

or

src: url("/assets/font/GraublauWebBold.woff") format("woff");

Upvotes: 2

lohnsonok
lohnsonok

Reputation: 517

Use it like this, correct path:

@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("/src/assets/font/GraublauWebBold.woff") format("woff");
}

Upvotes: 4

Related Questions