How to resolve CSS module error in angular 12

Question

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'

bad_coder · Accepted Answer · 2021-09-20 00:09:16Z

4

Use it like this, correct path:

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

edited Sep 20, 2021 at 0:09

bad_coder

13.3k20 gold badges58 silver badges92 bronze badges

answered Sep 19, 2021 at 21:18

lohnsonok

5177 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ipodtouch0218 · Accepted Answer · 2024-08-17 22:34:56Z

2

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");

edited Aug 17, 2024 at 22:34

ipodtouch0218

3,4159 gold badges17 silver badges31 bronze badges

answered Sep 19, 2021 at 17:00

Juan Vicente Berzosa Tejero

3,0422 gold badges8 silver badges16 bronze badges

2 Comments

Sansara Over a year ago

assets?????????????

Juan Vicente Berzosa Tejero Over a year ago

Yes, "assets". Can you navegate to your webapp, and check if you have something like 'D:\project\star\src\app\assets\font' with fonts inside?

Collectives™ on Stack Overflow

How to resolve CSS module error in angular 12

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related