Gatsby: Add resolve-url-loader to gatsby-plugin-sass

[cezarneaga]

Summary

In sass files that use paths to images, fonts, svg... we need to have the resolve-url loader so that webpack can find the files

Basic example

.header-banner.green {
      background: map-get($group-accelerate, start)
        url('../../../images/new/crowdfunding/banner.png') 45px 30px no-repeat;
    }
    .header-banner {
      color: $white;
      margin: -2px 0 30px 0;
      border-radius: $global-radius;
      padding: 30px;
      background: map-get($foundation-palette, primary)
        url('../../../images/new/crowdfunding/banner.png') 45px 30px no-repeat;
      ::selection {
        background: $white;
        color: $black;
      }

this code doesn't compile to css without it.

Motivation

Common stuff like this should work out of the box.
What do you think?

thanks
tagging: @jquense :)

[jquense]

hmm i've never run into this.. I'm using the latest sass plugin right now and it has no problem with the files.

Can you maybe put together a very small repo demonstrating the issue? and what version of everything you are running?

[cezarneaga]

sure. will do and get back to you.

[cezarneaga]

Hi @jquense,

here is a sample repo: https://github.com/cezarneaga/sass-example i made cloning the default starter and adding sass plugin.
am i doing something wrong?

[cezarneaga]

@jquense did you try the repo?

[cezarneaga]

i just figured something out. the file imports need to be relative to the entry scss file.
if you'd like i'll close the issue and propose a PR to document this.

[m-allanson]

if you'd like i'll close the issue and propose a PR to document this.

Yes please, that'd be great @cezarneaga 👍

[pieh]

i just figured something out. the file imports need to be relative to the entry scss file.
if you'd like i'll close the issue and propose a PR to document this.

It's fine to document this as known issue but ultimately this is bug that need to be fixed.

[fardarter]

This needs to be on front page docs. Just took two hours from me.

[jquense]

@cezarneaga sorry I've been busy :/ I'll take look, when you say urls need to be relative, do mean like background images? I think you're seeing the normal sass import behavior, which inlines the file in the file your importing. So it'd make sense that import would be relative to the entry in that case.

I usually use Sass with css modules where there is no "entry" file since you import each file in the component you want to use the styles with. Or in the normal sass usage, I tend to have the font/image path as a variable.

I'm not sure if changing the default behavior (if that's what this is) is a good idea as a default but maybe yeah adding note about potential pitfalls is good.

Edit: this pitfalls is documented on the sass-loader page! https://github.com/webpack-contrib/sass-loader/blob/master/README.md#problems-with-url

[KyleAMathews]

Yeah, it suggests adding https://github.com/bholloway/resolve-url-loader which perhaps we could do.

[jquense]

My one concern with adding it by default is it might break folks expectations coming from a sass heavy background, since this is "just how sass works" so to speak. I think it's a good option to have, I'm just not sure if it being on or off by default is the least suprising

[fardarter]

@jquense A boolean option in config would make that easy enough (and it's just a dev dep), but realistically just making this prominent in the docs would do a lot of the work. That option could either say it has normal behaviour or the behaviour we'd expect.

From the doc: "More likely you will be disrupted by this second issue. It is natural to expect relative references to be resolved against the .scss file in which they are specified (like in regular .css files)."

I also can't think of too many other circumstance where this expectation is violated.

[KyleAMathews]

I think a docs PR would be a great next step — anyone want to volunteer?

[fardarter]

@KyleAMathews If someone could point me to the docs repo, I'll do one.

Shy to ask, not being terribly experienced with open source contribution, do I fork the whole repo to make a PR of a few lines of change?

[KyleAMathews]

@fardarter thanks!

The docs are here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sass/README.md

You just need to edit the file in the UI by clicking the "pencil" icon and then creating the PR. Looking forward to it!