angular-cli: css-loader failing finding relative url in css
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
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 8
- Comments: 17 (2 by maintainers)
the solution is to remove style.css from angular-cli.json
@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 ?
It worked for me after running following command, there is some issue with bootstrap other versions
npm install bootstrap@4.0.0-alpha.6