angular - 'CssSyntaxError' - Failed to compile

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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] 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] 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] 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] 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] 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]   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] 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]   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] 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]   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] 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]   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] i ｢wdm｣: Failed to compile.
    "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"
 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);
                I added the fonts to the assets folder and it worked! Thank you @Pardeep Jain  Why do the fonts need to be added to this folder and what is the significance of the assets folder? Should I be adding other files to the assets folder?
– rf2018
                May 31, 2018 at 12:43
                Glad to know :) Because as per Angular all the static content like images/fonts/JSON/css files should be in assets folder and angular will try to get data from there only
– Pardeep Jain
                May 31, 2018 at 12:45
                More than the 'assets' folder, what matters is that you use absolute paths in url() rather than relative paths.  We have our assets in a folder that is not named assets at the root of our project and it works perfectly.  I did a bunch of research and found that when you start your path with ./ or ../ it will throw an error, because url() in this scenario expects it to be an absolute path from the root of the project.  Hope that helps
– anothercoder
                Jan 9, 2020 at 0:44
                For me this doesn't work....I put it in src/app/assets/fonts folder and am referencing it to there but it won't take it. The error stays, csssyntax error, same as yours.
– Vladimir Despotovic
                May 14, 2020 at 16:20
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.