Having css-loader post-css loader ERROR

[ellipizle]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

   Windows 8

2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

   angular-cli: 1.0.0-beta.11-webpack.8
   node: 6.5.0

3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

4. The log given by the failure. Normally this include a stack trace and some
   more information.

ERROR in .//css-loader!.//postcss-loader!./src/assets/css/jquery-ui.min.css
Module not found: Error: Can't resolve './images/animated-overlay.gif' in 'C:\ta
ttara-app\src\assets\css'
@ .//css-loader!.//postcss-loader!./src/assets/css/jquery-ui.min.css 6:9512-9
552
@ ./src/assets/css/jquery-ui.min.css
@ multi styles

ERROR in .//css-loader!.//postcss-loader!./src/assets/css/ace.min.css
Module not found: Error: Can't resolve './images/pattern.jpg' in 'C:\tattara-app
\src\assets\css'
@ .//css-loader!.//postcss-loader!./src/assets/css/ace.min.css 6:251522-25155
3
@ ./src/assets/css/ace.min.css
@ multi styles

ERROR in .//css-loader!.//postcss-loader!./src/assets/css/ace.min.css
Module not found: Error: Can't resolve './images/meteorshower2.jpg' in 'C:\tatta
ra-app\src\assets\css'
@ .//css-loader!.//postcss-loader!./src/assets/css/ace.min.css 6:252140-25217
7
@ ./src/assets/css/ace.min.css
@ multi styles

ERROR in .//css-loader!.//postcss-loader!./src/assets/css/ace-ie.min.css
Module not found: Error: Can't resolve './images/loading.gif' in 'C:\tattara-app
\src\assets\css'
@ .//css-loader!.//postcss-loader!./src/assets/css/ace-ie.min.css 6:572-603 6
:854-885 6:5665-5696
@ ./src/assets/css/ace-ie.min.css
@ multi styles

ERROR in .//css-loader!.//postcss-loader!./src/loading.css
Module not found: Error: Can't resolve '../assets/avatars/form-list.png' in 'C:
tattara-app\src'
@ .//css-loader!.//postcss-loader!./src/loading.css 6:2088-2130
@ ./src/loading.css
@ multi styles

ERROR in .//css-loader!.//postcss-loader!./src/loading.css
Module not found: Error: Can't resolve '../assets/avatars/project-collaborators.
png' in 'C:\tattara-app\src'
@ .//css-loader!.//postcss-loader!./src/loading.css 6:2357-2411
@ ./src/loading.css
@ multi styles

ERROR in .//css-loader!.//postcss-loader!./src/loading.css
Module not found: Error: Can't resolve '../assets/avatars/project-card.png' in '
C:\tattara-app\src'
@ .//css-loader!.//postcss-loader!./src/loading.css 6:4465-4510
@ ./src/loading.css
@ multi styles

ERROR in ./src/assets/css/select2-spinner.gif
Module parse failed: C:\tattara-app\src\assets\css\select2-spinner.gif Unexpecte
d character '►' (1:6)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ .//css-loader!.//postcss-loader!./src/assets/css/select2.css 6:7359-7391 6:
7440-7472 6:7618-7650 6:7759-7791 6:7897-7929 6:13360-13392 6:15879-15911
@ ./src/assets/css/select2.css
@ multi styles

ERROR in ./src/assets/img/loading.gif
Module parse failed: C:\tattara-app\src\assets\img\loading.gif Unexpected charac
ter '►' (1:6)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ .//css-loader!.//postcss-loader!./src/assets/css/bootstrap-editable.css 6:1
834-1863
@ ./src/assets/css/bootstrap-editable.css
@ multi styles

1. Mention any other details that might be useful.

everything works well before upgrading angular cli to @webpack
here are the details of my angular-cli.json
}, "apps": [ { "root": "src", "outDir": "dist", "assets": "assets", "index": "index.html", "main": "main.ts", "test": "test.ts", "tsconfig": "tsconfig.json", "prefix": "app", "mobile": false, "styles": [ "styles.css", "assets/css/bootstrap.min.css", "assets/css/font-awesome.min.css", "assets/css/jquery-ui.min.css", "assets/css/ace-fonts.css", "assets/css/ace.min.css", "assets/css/ace-skins.min.css", "assets/css/select2.css", "assets/css/ace-rtl.min.css", "assets/css/bootstrap-editable.css", "assets/css/ace-ie.min.css", "loading.css" ], "scripts": [ "assets/js/jquery.min.js", "assets/js/ace-extra.min.js", "assets/js/bootstrap.min.js", "assets/js/bootstrap-wysiwyg.min.js", "assets/js/x-editable/bootstrap-editable.min.js", "assets/js/ace-elements.min.js", "assets/js/ace.min.js" ],

---

Thanks! We'll be in touch soon.

[monojack]

Define your styles urls as relative to index.html and not to the file location. These are css rules not imports, and they will be required at runtime.

ex:

...
background-image: url('assets/images/example.jpg');
...
src: url('assets/fonts/roboto/roboto.woff');
...

[ellipizle]

thank you @monojack for your response.
by style urls do you mean maybe for example within my select2.min.css

inside select2.css
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
background: #fff url('assets/css/select2-spinner.gif') no-repeat 100% !important;
}

location of select2.css
src->assets->css

angular-cli.json
"styles: [
"assets/css/select2.css"
]

[monojack]

yes. it doesnt matter where your css file is. those url paths need to be relative to the index.html because index.html will require them at runtime. so yes, background: #fff url('assets/css/select2-spinner.gif') no-repeat 100% !important; is correct

[andvasp]

Hi Guys,

I had the same problem. I solved the problem include the gif to be load in the "webpack-build-commom.ts" replacing the line below. But I am "hacking" the angular-cli.

Current: { test: /.(jpg|png)$/, loader: 'url-loader?limit=10000' },
Replace: { test: /.(jpg|png|gif)$/, loader: 'url-loader?limit=10000' },

@filipesilva, I am seen a lot of issues related to this problem ( #1878, #256, #1943 ). Would be good to add soon support for more file format as request on #1634 and avoid more issues because of this.

[filipesilva]

Fixed in #2066

[angular-automatic-lock-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.}