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

This looks like a known issue with the latest angular CLI version.

It is perfectly valid to state the background url without quotes. This has been answered before on stackoverflow and it is valid syntax as you have it.

CSS background-image - What is the correct usage?

It was working before but not since the upgrade so this either points to a bug in the new version or perhaps the new version is stricter on something but the CSS syntax looks fine.

Searching for bugs I found the following:
Can't resolve SVGID after upgrading to 1.7
Ng build fails. CssSyntaxError since 1.7.0-rc.0
fix(@angular/cli): improve processing multi-line url() CSS rules

A fix was merged into the master branch after the 1.7.3 release so I would expect your problem to be fixed in the next release after 1.7.3.

Answer 2

The issue is @angular/cli@1.7.3 uses Webpack@3.11 which does not recognize the paths in the css in the screenshots above.

I had to downgrade to @angular/cli@1.5.6 which uses @webpack@3.8 which built the project successfully.

Answer 3

Change the code in line number 7102 to

background: url("../img/filetree/code.png") left top no-repeat;

also change 7015 to

 background: url("../img/filetree/zip.png") left top no-repeat;

Answer 4

Pass the URL as a string. this way:

li.ext_xml {

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