'CssSyntaxError' - Failed to compile

Question

Description

We are currently creating a new angular 5 ui-library, however I am receiving an error when I try to add the fonts contained within fonts.scss.

I have added the package.json file for info, if any further details are required to debug please let me know.

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

Error Message

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'

Terminal - full error message

 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"
    }
  }
}

Answer 1

Put all your fonts files into assets folder and try to Load from there -

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