Webpack Error in Angular Project

Question

Getting this error after upgrading my global Angular CLI to version 1.7.3(not sure exactly is breaking the build). Web pack seems not understand path reference any more.

ERROR in ./src/app/app.component.css
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\kkehinde\Documents\WebStorm\Admin\src\assets\css\theme-default.css:7102:19: Can't resolve '../img/filetree/code.png'
in 'C:\Users\kkehinde\Documents\WebStorm\Admin\src\app'

  7100 | }
  7101 | li.ext_xml {
> 7102 |   background: url(../img/filetree/code.png) left top no-repeat;
       |                   ^
  7103 | }
  7104 | li.ext_zip {

ERROR in ./src/app/app.component.css
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\kkehinde\Documents\WebStorm\Admin\src\assets\css\theme-default.css:7105:19: Can't resolve '../img/filetree/zip.png' in 'C:\Users\kkehinde\Documents\WebStorm\Admin\src\app'

  7103 | }
  7104 | li.ext_zip {
> 7105 |   background: url(../img/filetree/zip.png) left top no-repeat;
       |                   ^
  7106 | }
  7107 | /* END Filetree */

My Package.json is below, I added locked down node-sass to version 4.7.2 as someone suggested that that was what is breaking the webpack build but still getting same above error.

{
  "name": "admin",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.4.4",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular2-notifications": "^0.7.8",
    "core-js": "^2.4.1",
    "ng2-progressbar": "^1.3.0",
    "ngx-progressbar": "^2.0.8",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.2",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.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",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3",
    "node-sass": "4.7.2"
  }
}

Answer 1

Pass the URL as a string. this way:

li.ext_xml {

7102 | background: url("../img/filetree/code.png") left top no-repeat; | ^ 7103 | }

Answer 2

The issue is @angular/[email protected] uses [email protected] which does not recognize the paths in the css in the screenshots above.

I had to downgrade to @angular/[email protected] which uses @[email protected] which built the project successfully.