Issue with url resolution for bower dependencies

NickClark commented 8 years ago

When trying to import the select2 styles from bower, it fails to find the images select2 requires.

> app@1.0.0 start /usr/src/app
> webpack

Hash: 32c3c762f05461554636
Version: webpack 1.12.2
Time: 1033ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  30.7 kB       0  [emitted]  main
bundle.js.map  35.8 kB       0  [emitted]  main
    + 5 hidden modules

WARNING in ../deps/~/css-loader!../deps/~/resolve-url-loader!../deps/~/sass-loader?sourceMap!./test.scss
CSS syntax error (resolve-url-loader did not operate): ENOENT: no such file or directory, scandir '/usr/deps/bower_components/select2'

ERROR in ../deps/~/css-loader!../deps/~/resolve-url-loader!../deps/~/sass-loader?sourceMap!./test.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./select2.png in /usr/src/app
 @ ../deps/~/css-loader!../deps/~/resolve-url-loader!../deps/~/sass-loader?sourceMap!./test.scss 6:2729-2753 6:5099-5123 6:5683-5707 6:5758-5782 6:5930-5954 6:6065-6089 6:6197-6221 6:15392-15416

ERROR in ../deps/~/css-loader!../deps/~/resolve-url-loader!../deps/~/sass-loader?sourceMap!./test.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./select2-spinner.gif in /usr/src/app
 @ ../deps/~/css-loader!../deps/~/resolve-url-loader!../deps/~/sass-loader?sourceMap!./test.scss 6:6455-6487 6:6532-6564 6:6706-6738 6:6843-6875 6:6977-7009 6:11350-11382 6:13559-13591

ERROR in ../deps/~/css-loader!../deps/~/resolve-url-loader!../deps/~/sass-loader?sourceMap!./test.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./select2x2.png in /usr/src/app
 @ ../deps/~/css-loader!../deps/~/resolve-url-loader!../deps/~/sass-loader?sourceMap!./test.scss 6:17499-17525

I have made an example project here

I feel like I must be missing something obvious. A base path option?

bholloway commented 8 years ago

When using bower I use 2-part configuration - both this and that. However it looks to me like this is not the issue.

The source-map sources from the sass-loader are as follows:

../test.scss
../bower_components/select2/select2.css

I really don't see how that can be. Still investigating.

bholloway commented 8 years ago

Ok, found the problem

I need to do a fix but if I do it the simple way it will tie us in to the SASS preprocessor. Since you are using SASS this is not a problem for you and can use the simple fix right away. Just install from github branch bholloway/resolve-url-loader#sass-specific. I will have the general fix soon.
You need to include url-loader in your package.json.

Let me know if this gets you moving. I will leave the issue open until I have the general fix published on npm.

bholloway commented 8 years ago

@NickClark, general solution is 1.3.0 release that I just published.

As stated above also add url-loader in your package.json.

Please let me know whether this works for you so I can close the issue.

NickClark commented 8 years ago

Wow! You were really on the ball! Sorry I didn't get back to you sooner. Ya, that fixed it! Thanks!

bholloway / resolve-url-loader

Issue with url resolution for bower dependencies #4