问题描述
我已经在 Angular 中创建了我的 scss 项目，当我尝试添加字体时，出现错误，我该如何解决问题？
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;
}
变量.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");
}
在文件 (angular.json) 中，我更改了 style.scss 文件的路径。
angular.json：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
"PWP": {
"projectType": "application","schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},"root": "","sourceRoot": "src","prefix": "app","architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser","options": {
"outputPath": "dist/PWP","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": [
"src/favicon.ico","src/assets"
],"styles": [
"src/scss/styles.scss","src/scss/mixin.scss","src/scss/variables.scss","./node_modules/bootstrap/dist/css/bootstrap.css"
],"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.js","./node_modules/bootstrap/dist/js/bootstrap.js"
]
},"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
}
],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
{
"type": "initial","maximumWarning": "2mb","maximumError": "5mb"
},{
"type": "anyComponentStyle","maximumWarning": "6kb","maximumError": "10kb"
}
]
}
}
},"serve": {
"builder": "@angular-devkit/build-angular:dev-server","options": {
"browserTarget": "PWP:build"
},"configurations": {
"production": {
"browserTarget": "PWP:build:production"
}
}
},"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n","options": {
"browserTarget": "PWP:build"
}
},"test": {
"builder": "@angular-devkit/build-angular:karma","options": {
"main": "src/test.ts","tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","styles": [
"src/scss/styles.scss"
],"scripts": []
}
},"lint": {
"builder": "@angular-devkit/build-angular:tslint","options": {
"tsConfig": [
"tsconfig.app.json","tsconfig.spec.json","e2e/tsconfig.json"
],"exclude": [
"**/node_modules/**"
]
}
},"e2e": {
"builder": "@angular-devkit/build-angular:protractor","options": {
"protractorConfig": "e2e/protractor.conf.js","devServerTarget": "PWP:serve"
},"configurations": {
"production": {
"devServerTarget": "PWP:serve:production"
}
}
}
}
}
},"defaultProject": "PWP","cli": {
"analytics": "c792c032-9136-42b5-8b0a-391b6f8d84c5"
}
}
package.json：
{
"name": "pwp","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": "~9.1.7","@angular/cdk": "^9.2.4","@angular/common": "~9.1.7","@angular/compiler": "~9.1.7","@angular/core": "~9.1.7","@angular/forms": "~9.1.7","@angular/material": "^9.2.4","@angular/platform-browser": "~9.1.7","@angular/platform-browser-dynamic": "~9.1.7","@angular/router": "~9.1.7","bootstrap": "^4.6.0","jquery": "^3.5.1","rxjs": "~6.5.4","tslib": "^1.10.0","zone.js": "~0.10.2"
},"devDependencies": {
"@angular-devkit/build-angular": "~0.901.6","@angular/cli": "~9.1.6","@angular/compiler-cli": "~9.1.7","@types/node": "^12.11.1","@types/jasmine": "~3.5.0","@types/jasminewd2": "~2.0.3","codelyzer": "^5.1.2","jasmine-core": "~3.5.0","jasmine-spec-reporter": "~4.2.1","karma": "~5.0.0","karma-chrome-launcher": "~3.1.0","karma-coverage-istanbul-reporter": "~2.1.0","karma-jasmine": "~3.0.1","karma-jasmine-html-reporter": "^1.4.2","protractor": "~5.4.3","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~3.8.3"
}
}
控制台错误：
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: Can't resolve '../assets/font/vazir-font-v27.2.0/Vazir-Bold.eot' in 'E:\project\PwpEnd\PWP\src\app\layout\home'
3 | @font-face {
4 | font-family: Vazir;
> 5 | src: url("../assets/font/vazir-font-v27.2.0/Vazir-Bold.eot");
| ^
6 | src: url("../assets/font/vazir-font-v27.2.0/Vazir-Black.ttf") format("ttf");
7 | }
我该如何解决这个问题？
解决方法
试试这个
@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");
}
来自https://github.com/angular/angular-cli/issues/6599的回答 我有同样的问题，它对我有用
,照片的地址必须从根给出，如下
$font-vazir-bold:"Vazir";
@font-face {
font-family: Vazir;
src: url("src/assets/font/vazir-font-v27.2.0/Vazir-Bold.eot");
src: url("src/assets/font/vazir-font-v27.2.0/Vazir-Black.ttf") format("ttf");
}