Angular 项目中的 Webpack 错误

Posted 2023-03-07

【中文标题】Angular 项目中的 Webpack 错误

【英文标题】：Webpack Error in Angular Project

【发布时间】：2018-09-04 08:00:36

【问题描述】：

将我的全局 Angular CLI 升级到 1.7.3 版后出现此错误（不确定是否会破坏构建）。 Webpack 似乎不再理解路径引用了。

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 */

我的 Package.json 在下面，我在 4.7.2 版本中添加了锁定的 node-sass，因为有人建议这是破坏 webpack 构建但仍然出现上述错误的原因。

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

【参考方案1】：

将 URL 作为字符串传递。 这样：

li.ext_xml

7102 |背景： url("../img/filetree/code.png") 左上无重复； | ^ 7103 |

【讨论】：

我的所有构建中都有无数的相同错误实例，这一直在工作，我真的不明白为什么要进行此更改，我可能错了

【参考方案2】：

问题是@angular/cli@1.7.3 使用Webpack@3.11 无法识别上面屏幕截图中css 中的路径。

我不得不降级到@angular/cli@1.5.6，它使用@webpack@3.8，成功构建了项目。

【参考方案3】：

将第7102行代码改为

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

也将 7015 改为

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

【参考方案4】：

这似乎是最新 Angular CLI 版本的一个已知问题。

在不带引号的情况下声明背景 url 是完全有效的。之前在 *** 上已经回答了这个问题，并且它是有效的语法。

CSS background-image - What is the correct usage?

它在升级之前可以工作，但在升级之后就没有了，所以这要么是新版本中的错误，要么是新版本在某些方面更严格，但 CSS 语法看起来不错。

搜索错误发现如下：Can't resolve SVGID after upgrading to 1.7Ng build fails. CssSyntaxError since 1.7.0-rc.0fix(@angular/cli): improve processing multi-line url() CSS rules

在 1.7.3 版本之后，一个修复被合并到主分支中，所以我希望您的问题在 1.7.3 之后的下一个版本中得到修复。