I'm facing an error in my Angular project when trying to add a font to the SCSS file. How can I resolve this issue?
style.scss:
@import "~@angular/material/theming";
@include mat-core();
$PWP-primary: mat-palette($mat-indigo);
$PWP-accent: mat-palette($mat-pink, A200, A100, A400);
$PWP-warn: mat-palette($mat-red);
$PWP-theme: mat-light-theme($PWP-primary, $PWP-accent, $PWP-warn);
@include angular-material-theme($PWP-theme);
@import "~bootstrap/dist/css/bootstrap.css";
@import './variables.scss';
html,body {
height: 100%;
}
body {
margin: 0;
font-family: $font-vazir-bold;
direction: rtl;
}
variables.scss:
$font-vazir-bold:"Vazir";
@font-face {
font-family: Vazir;
src: url("../assets/font/vazir-font-v27.2.0/Vazir-Bold.eot");
src: url("../assets/font/vazir-font-v27.2.0/Vazir-Black.ttf") format("ttf");
}
In the angular.json file, I made changes to the path of the style.scss file.
angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
...
package.json:
{
"name": "pwp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
...
Error in console:
Failed to compile.
./src/app/layout/home/home.component.scss
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: E:\project\PwpEnd\PWP\src\scss\variables.scss:5:4:
...
Any suggestions on how to address this issue?