Webpack error in Angular project

Question

Getting this error after updating my global Angular CLI to version 1.7.3 (not sure if this is what destroys the assembly). The web package no longer understands link to link.

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 below, I added a blocked node-sass to version 4.7.2, as someone suggested that this is what destroys the webpack assembly, but still getting the same error above.

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

The problem is @angular/cli@1.7.3using Webpack@3.11one that does not recognize the path in css in the screenshots above.

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

Answer 2

Pass the URL as a string. in the following way:

li.ext_xml {

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

Answer 3

7102

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

7015

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

Answer 4

angular CLI.

url . stackoverflow, , .

CSS background-image - ?

, , , , , - , CSS .

Searching for errors I found the following:
Cannot resolve SVGID after upgrade to version 1.7
Ng build failed. CssSyntaxError with 1.7.0-rc.0
fix (@ angular / cli): improve CSS multi-line url () handling

The commit was merged with the main branch after release 1.7.3, so I expected your problem to be fixed in the next version after 1.7.3.