feat(gatsby-plugin-sass): add option to enable resolve-url-loader

[carlosruana]

Description

Currently plugin just resolves url() paths relative to the main sass entry file.
resolve-url-loader adds the ability to use paths relative to the file where the url() is being used.

By default if not configured in the gatsby-plugin-sass, the loader is not being used, but you can activate it and also configure resolve-url-loader plugin with the options it provides.

Usage has been also documented in the README.md of the gatsby-plugin-sass

Related Issues

Fixes #7776, #6438

[wardpeet]

Cool 😎 ! Any reason why we shouldn't enable this by default? Any possible breaking scenarios?

[carlosruana]

Cool 😎 ! Any reason why we shouldn't enable this by default? Any possible breaking scenarios?

Well, sass and sass-loader do not provide url rewriting by default, they recommend using resolve-url-loader to solve that. So, the expected behavior is using paths in url() relative to the entry file and I would not change defaults as it can confuse plugin users. It would break also projects using images already created with those paths relatives to the entry file and not relative to the file where the image is loaded itself.

Activating it will benefit though users trying to generate documentation from external projects which uses relative url() to the file without having to modify their projects code (that is mainly the reason I need it). Also users generating new documentation with Gatsby from scratch will benefit by being able to add short relative paths as url(./image_name.svg) and not having to remember the main entry file.

[slang25]

Some anecdotal justification for this change:

I've just picked up gatsbyjs for the first time for a side project (cause it looks great!), and have started to migrate my site to it. This is the first issue I faced with gatsby and I wasn't ready to hack around the problem, and until seeing this PR I was about to drop it and try a different framework altogether!

[wardpeet]

When green I'll merge this one.

sorry for keeping you waiting @carlosruana! This slipped my mind.

[gatsbot]

Holy buckets, @carlosruana — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. We’ve got Gatsby t-shirts, stickers, hats, scrunchies, and much more. (You can also unlock even more free swag with 5 contributions — wink wink nudge nudge.) See gatsby.dev/swag for details.
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!