css-loader failing finding relative url in css

[albanx]

I am just trying to migrate a webpack angular 2 project to cli. The problem seems that any relative url inside the .css files is not found by css-loader. The directories are correct.

• Window 10
• Node 6.10
• node: 6.10.0
  os: win32 x64
  @angular/common: 4.0.0-rc.1
  @angular/compiler: 4.0.0-rc.1
  @angular/core: 4.0.0-rc.1
  @angular/forms: 4.0.0-rc.1
  @angular/http: 4.0.0-rc.1
  @angular/material: 2.0.0-beta.2
  @angular/platform-browser: 4.0.0-rc.1
  @angular/platform-browser-dynamic: 4.0.0-rc.1
  @angular/router: 4.0.0-rc.1
  @angular/cli: 1.0.0-rc.0
  @angular/compiler-cli: 4.0.0-rc.1

How to reproduce:
Create a new A2 with the cli and add a css with a relative url inside (ex. fontawesome.css)

Error:

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./src/assets/css/font-awesome.min.css
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont93e3.eot?v=4.4.0' in 'D:\projects\frontend2\src\assets\css'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./src/assets/css/font-awesome.min.css 6:249-304
 @ ./src/assets/css/font-awesome.min.css
 @ multi ./src/assets/css/bootstrap.min.css ./src/assets/css/font-awesome.min.css ./src/assets/css/main.css ./src/assets/css/responsive.css ./src/assets/css/temp.css ./src/assets/css/account.css ./src/assets/css/payment.css

[Rj-s]

Facing same issue. any solution ?

[albandaft]

The only workaround for me for now was to load styles in to load styles in index.html instead of angular-cli.json:

[filipesilva]

Can you put up a repo I can look at?

[albandaft]

Sure I will.

[achanthamynavong]

I have the same issue, definitely has something to do with the way the assets are being loaded. using angular-cli: "1.0.0-beta.28.3

[amostech]

Any comments on this? We are having the same issue.

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./src/styles.css
Module not found: Error: Can't resolve '@angular/material/core/theming/prebuilt/indigo-pink.css' in '/home/ubuntu/s17-ESN-SV4/sv4-esn-view/src'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./src/styles.css 4:10-196
 @ ./src/styles.css
 @ multi ./src/styles.css

Here's our current package.json.

  "name": "sv4-esn-view",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "preinstall": "npm install -g live-server",
    "start": "node liveserver.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "postinstall": "ng build",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.2",
    "@angular/cli": "1.0.0",
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.1",
    "@angular/compiler-cli": "^4.0.1",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.1",
    "@angular/http": "^4.0.1",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^4.0.1",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/router": "^4.0.1",
    "@types/jasmine": "2.5.47",
    "@types/node": "~7.0.12",
    "codelyzer": "~3.0.0-beta.4",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.5.0",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.0.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "live-server": "^1.2.0",
    "normalize.css": "^6.0.0",
    "protractor": "~5.1.1",
    "rxjs": "^5.3.0",
    "socket.io": "^1.7.3",
    "ts-node": "~3.0.2",
    "tslint": "~5.0.0",
    "typescript": "~2.2.2",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "karma-coverage": "^1.1.1",
    "karma-coverage-istanbul-reporter": "^1.0.0",
    "remap-istanbul": "^0.9.5"
  },
  "engines": {
    "node": "7.5.0"
  }
}

[albanx]

This might be an issue related to the css loader. But everything is wraped by the cli

[amostech]

So maybe there's a new version of the CSS loader that broke the entire system? If that's the case what is the correct version to use alongside angular-cli? Does this work for you guys? If yes, can you share what versions of your dependencies you currently have?

Is this related to node-sass?

The reason why I am asking this is because our CI tool is currently failing due to this problem.

[MohammadKTaha]

the solution is to remove style.css from angular-cli.json

[chenx376]

Thanks for the help! We installed the update of the angular-cli and it is working correctly now.

[z639]

@amostech I know that in material@2.0.0-beta.3 that the import path has changed, try this:
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

It might have changed back in beta.2 ?

[manunoly]

thanks.. this final comment solve the issue