描述
我们正在创建一个新的angular 5 ui-library,但是当我尝试添加fonts.scss中包含的字体时,我收到一个错误.
我已经添加了package.json文件的信息,如果需要调试任何进一步的细节请告诉我.
fonts.scss
@font-face {
font-family: 'bree-thin';
src: url('./fonts/bree-thin/bree-thin.eot');
src: url('./fonts/bree-thin/bree-thin.woff2') format('woff2'),url('./fonts/bree-thin/bree-thin.woff') format('woff')
}
@font-face {
font-family: 'Noto';
src: url('./fonts/NotoSans-Regular.ttf');
font-weight: normal;
font-style: normal;}
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);
错误信息
Failed to compile. ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css) (Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:38:13: Can't resolve './fonts/bree-thin/bree-thin.eot' in 'C:\angular-library\dist'
终端 – 完整错误消息
WARNING in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css) [0] (Emitted value instead of an instance of Error) postcss-import: C:\angular-library\dist\ui-lib.css:11:1: @import must precede all other statements (besides @charset) [0] [0] WARNING in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css) [0] (Emitted value instead of an instance of Error) postcss-url: C:\angular-library\dist\ui-lib.css:38:3: Can't read file 'C:\angular-library\dist\fonts\bree-thin\bree-thin.eot',ignoring [0] [0] WARNING in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css) [0] (Emitted value instead of an instance of Error) postcss-url: C:\angular-library\dist\ui-lib.css:39:3: Can't read file 'C:\angular-library\dist\fonts\bree-thin\bree-thin.woff',ignoring [0] [0] WARNING in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css) [0] (Emitted value instead of an instance of Error) postcss-url: C:\angular-library\dist\ui-lib.css:39:3: Can't read file 'C:\angular-library\dist\fonts\bree-thin\bree-thin.woff2',ignoring [0] [0] WARNING in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css) [0] (Emitted value instead of an instance of Error) postcss-url: C:\angular-library\dist\ui-lib.css:43:3: Can't read file 'C:\angular-library\dist\fonts\NotoSans-Regular.ttf',ignoring [0] [0] ERROR in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css) [0] (Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:38:13: Can't resolve './fonts/bree-thin/bree-thin.eot' in 'C:\angular-library\dist' [0] [0] 36 | @font-face { [0] 37 | font-family: 'bree-thin'; [0] > 38 | src: url("./fonts/bree-thin/bree-thin.eot"); [0] | ^ [0] 39 | src: url("./fonts/bree-thin/bree-thin.woff2") format("woff2"),url("./fonts/bree-thin/bree-thin.woff") format("woff"); } [0] 40 | [0] [0] ERROR in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css) [0] (Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:39:13: Can't resolve './fonts/bree-thin/bree-thin.woff' in 'C:\angular-library\dist' [0] [0] 37 | font-family: 'bree-thin'; [0] 38 | src: url("./fonts/bree-thin/bree-thin.eot"); [0] > 39 | src: url("./fonts/bree-thin/bree-thin.woff2") format("woff2"),url("./fonts/bree-thin/bree-thin.woff") format("woff"); } [0] | ^ [0] 40 | [0] 41 | @font-face { [0] [0] ERROR in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css) [0] (Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:39:13: Can't resolve './fonts/bree-thin/bree-thin.woff2' in 'C:\angular-library\dist' [0] [0] 37 | font-family: 'bree-thin'; [0] 38 | src: url("./fonts/bree-thin/bree-thin.eot"); [0] > 39 | src: url("./fonts/bree-thin/bree-thin.woff2") format("woff2"),url("./fonts/bree-thin/bree-thin.woff") format("woff"); } [0] | ^ [0] 40 | [0] 41 | @font-face { [0] [0] ERROR in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css) [0] (Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:43:13: Can't resolve './fonts/NotoSans-Regular.ttf' in 'C:\angular-library\dist' [0] [0] 41 | @font-face { [0] 42 | font-family: 'Noto'; [0] > 43 | src: url("./fonts/NotoSans-Regular.ttf"); [0] | ^ [0] 44 | font-weight: normal; [0] 45 | font-style: normal; } [0] [0] i ｢wdm｣: Failed to compile.
的package.json
{
"name": "angular-library-demo","version": "0.0.0","license": "MIT","scripts": {
"ng": "ng","start": "npm run build && npm run watch","build": "npm run clean && npm run copyAssets && npm run bundle && npm run copyDemoFiles","start:yarn": "yarn build && yarn watch","build:yarn": "yarn clean && yarn copyAssets && yarn bundle","test": "jest --silent","test:watch": "jest --silent --watch","lint": "ng lint","protractor": "protractor protractor.conf.js","bundle": "rollup -c","watch": "concurrently \"ng serve --open\" \"rollup -c -w\"","clean": "rimraf dist","copyAssets": "copyfiles -u 2 src/library/package.json dist","copyDemoFiles": "ng build && copyfiles demo/* dist && copyfiles Web.config dist/demo","bump:prerelease": "cd src/library && standard-version --prerelease --skip.changelog=true --skip.tag=true --message \"***NO_CI***\"","bump:release": "cd src/library && standard-version --release --message \"***NO_CI***\""
},"private": true,"dependencies": {
"@angular/animations": "^5.2.6","@angular/common": "^5.2.6","@angular/compiler": "^5.2.6","@angular/core": "^5.2.6","@angular/forms": "^5.2.6","@angular/http": "^5.2.6","@angular/platform-browser": "^5.2.6","@angular/platform-browser-dynamic": "^5.2.6","@angular/router": "^5.2.6","core-js": "^2.4.1","enhanced-resolve": "^3.3.0","rxjs": "5.5.8","zone.js": "^0.8.14"
},"devDependencies": {
"@angular-devkit/build-angular": "~0.6.0","@angular/cli": "^6.0.0","@angular/compiler-cli": "^5.2.6","@angular/language-service": "^5.2.6","@types/jasmine": "~2.5.53","@types/jasminewd2": "~2.0.2","@types/jest": "^22.2.2","@types/node": "~6.0.60","autoprefixer": "^8.2.0","codelyzer": "~3.2.0","concurrently": "^3.5.1","copyfiles": "^2.0.0","jasmine-core": "~2.6.2","jasmine-spec-reporter": "~4.1.0","jest": "^22.4.3","jest-preset-angular": "^5.2.1","karma": "~1.6.0","karma-chrome-launcher": "~2.1.1","karma-cli": "~1.0.1","karma-coverage-istanbul-reporter": "^1.2.1","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^0.2.2","live-server": "^1.2.0","postcss": "^6.0.21","protractor": "~5.1.2","rimraf": "^2.6.2","rollup": "^0.57.1","rollup-plugin-alias": "^1.4.0","rollup-plugin-angular": "^0.5.3","rollup-plugin-commonjs": "^9.1.0","rollup-plugin-node-resolve": "^3.3.0","rollup-plugin-sass": "^0.6.0","rollup-plugin-tslint": "^0.1.34","rollup-plugin-typescript2": "^0.12.0","rollup-watch": "^4.3.1","standard-version": "^4.3.0","testcafe": "^0.19.0","testcafe-angular-selectors": "^0.3.0","ts-node": "~3.2.0","tslint": "~5.7.0","typescript": "^2.6.2","webpack": "^4.8.1"
},"jest": {
"preset": "jest-preset-angular","setupTestFrameworkScriptFile": "<rootDir>/src/jest/setupJest.ts","roots": [
"<rootDir>/src/library"
],"moduleNameMapper": {
"\\.scss$": "<rootDir>/src/jest/SCSsstub.js"
}
}
}
解决方法
将所有字体文件放入assets文件夹并尝试从那里加载 –
@font-face {
font-family: 'bree-thin';
src: url('/assets/fonts/bree-thin/bree-thin.eot');
src: url('/assets/fonts/bree-thin/bree-thin.woff2') format('woff2'),url('/assets/fonts/bree-thin/bree-thin.woff') format('woff')
}
@font-face {
font-family: 'Noto';
src: url('/assets/fonts/NotoSans-Regular.ttf');
font-weight: normal;
font-style: normal;}
@import url(https://fonts.googleapis.com/css?family=Roboto:100,700);
