描述
我们正在创建一个新的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"
}
}
}
答案 0 :(得分：6)
将所有字体文件放入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,300,400,500,700);