bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 71 forks source link

bootstrap-loader + resolve-url-loader #12

Closed alex35mil closed 8 years ago

alex35mil commented 8 years ago

Hi @bholloway, thanks for great module! Currently I'm working on webpack loader and using resolve-url-loader as a dependency.

Here is the link to loader: shakacode/bootstrap-loader (this is rewrite of bootstrap-sass-loader)

In short: user can put bootstrap-loader as entry point and it will load all bootstrap stuff into the bundle. User can configure what to include from bootstrap modules. Also there is one more feature, which actually causes my current issue: user can provide paths to his files, where he can change the values of bootstrap's sass variables and even provide the endpoint file to his application's styles. Main benefit of this: user can use all bootstrap variables in his sass files, b/c they are loaded with bootstrap. So in case if user loads his custom assets from his file, I'm using resolve-url-loader to resolve relative paths to these user assets.

Everything works fine if I provide absolute path to output directory. But it fails if I provide relative path to output.

I created a sample repo, reproducing the problem: shakacode/sass-rel-paths-issue

I tested how it works with common style loaders and my bootstrap-loader. And it fails only in one case: bootstrap-loader + relative path to output location. So the problem is in how these packages work together.

Here is a short explanation how my loader works. User puts bootstrap-loader in his entry point array. It's not real loader here, b/c it's not applied to the file. Entry point of bootstrap-loader package looks like this:

require('./real-bootstrap-loader!./empty-dummy-file-just-to-apply-loader-to.js');

So inside real-bootstrap-loader.js I'm doing all the stuff: resolving paths to bootstrap packages, picking bootstrap pieces, resolving paths to user modules, putting it all together in one string with all the @imports and returning it to webpack.

My past day I spent shaving yak and trying to figure out why it doesn't work. In the end I localised the problem (bootstrap-loader + relative path to output location) and have no idea how to solve it. Maybe you can give me some directions why it's happening and how it can be solved.

Thanks in advance!

bholloway commented 8 years ago

Thanks for your effort diagnosing. Afk today but will take a look as soon so can.

bholloway commented 8 years ago

@alexfedoseev excellent sample project.

Please take a look at #13. I have a PR on your project to use the new code shakacode/sass-rel-paths-issue#1.

I haven't fully considered your application since a solution seemed evident at face value. So let me know if it needs more work.

alex35mil commented 8 years ago

@bholloway I tested it on sample project and on bigger project — both works great. Thanks a lot, looking forward for release! :+1:

bholloway commented 8 years ago

Published as 1.4.3.

alex35mil commented 8 years ago

Thanks again!