title: 'CssSyntaxError' - Failed to compile
body: <p><strong>Description</strong></p>
  
  <p>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.</p>
  
  <p>I have added the package.json file for info, if any further details are required to debug please let me know.</p>
  
  <p><strong>fonts.scss</strong></p>
  
  <pre><code>@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);
  </code></pre>
  
  <p><strong>Error Message</strong></p>
  
  <pre><code>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'
  </code></pre>
  
  <p><strong>Terminal - full error message</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> 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] &gt; 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] &gt; 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] &gt; 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] &gt; 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.</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>package.json</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "angular-library-demo",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "npm run build &amp;&amp; npm run watch",
      "build": "npm run clean &amp;&amp; npm run copyAssets &amp;&amp; npm run bundle &amp;&amp; npm run copyDemoFiles",
      "start:yarn": "yarn build &amp;&amp; yarn watch",
      "build:yarn": "yarn clean &amp;&amp; yarn copyAssets &amp;&amp; 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 &amp;&amp; copyfiles demo/* dist &amp;&amp; copyfiles Web.config dist/demo",
      "bump:prerelease": "cd src/library &amp;&amp; standard-version --prerelease --skip.changelog=true --skip.tag=true --message \"***NO_CI***\"",
      "bump:release": "cd src/library &amp;&amp; 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": "&lt;rootDir&gt;/src/jest/setupJest.ts",
      "roots": [
        "&lt;rootDir&gt;/src/library"
      ],
      "moduleNameMapper": {
        "\\.scss$": "&lt;rootDir&gt;/src/jest/SCSSStub.js"
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>