Angular-cli: 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 [email protected] 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

[asnelling]

PR here #5963

[filipesilva]

Closing as latest comments indicate the issue is solved. Thanks to everyone that helped!

[AliAdravi]

It worked for me after running following command, there is some issue with bootstrap other versions

npm install [email protected]

[gabidevjava]

npm install [email protected]
Funcionou para mim

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}