Gatsby: How to use resolve-url-loader with gatsby-plugin-sass in v2?

[borekb]

In v1, I could do this to make relative url() in Sass work:

// gatsby-node.js

exports.modifyWebpackConfig = function (config, stage) {
  if (config.config._loaders.sass.config.loaders) {
    config.config._loaders.sass.config.loaders.splice(config.config._loaders.sass.config.loaders.length - 1, 0, 'resolve-url-loader');
  }
  return config;
}

It's ugly but inserts the resolve-url-loader as the previous-to-last item in the list of style loaders.

How to achieve the same in v2?

[freddydumont]

@borekb Did you figure out a way to make the relative url() work?

[borekb]

Had to do some digging as we removed resolve-url-loader since but this was our gatsby-node.js at that point, incl. the comment :)

// Note: this is basically a copy of https://github.com/gatsbyjs/gatsby/blob/08d2bcf355550842c196439e58f6dda209963564/packages/gatsby-plugin-sass/src/gatsby-node.js
// with 'resolve-url-loader' added manually. I don't know how to do it in a better way in Gatsby v2.
// I asked here: https://github.com/gatsbyjs/gatsby/issues/7776

exports.onCreateWebpackConfig = (
  { actions, stage, rules, plugins, loaders },
  { postCssPlugins, ...sassOptions }
) => {
  const { setWebpackConfig } = actions
  const PRODUCTION = stage !== `develop`
  const isSSR = stage.includes(`html`)

  const sassLoader = {
    loader: `sass-loader`,
    options: {
      sourceMap: true, // this is required for 'resolve-url-loader' to work
      precision: 8, // required for Bootstrap
      ...sassOptions,
    },
  }

  const sassRule = {
    test: /\.s(a|c)ss$/,
    use: isSSR
      ? [loaders.null()]
      : [
          loaders.miniCssExtract(),
          loaders.css({ importLoaders: 2 }),
          loaders.postcss({ plugins: postCssPlugins }),
          'resolve-url-loader', // <-----
          sassLoader,
        ],
  }
  const sassRuleModules = {
    test: /\.module\.s(a|c)ss$/,
    use: [
      !isSSR && loaders.miniCssExtract(),
      loaders.css({ modules: true, importLoaders: 2 }),
      loaders.postcss({ plugins: postCssPlugins }),
      sassLoader,
    ].filter(Boolean),
  }

  let configRules = []

  switch (stage) {
    case `develop`:
    case `build-javascript`:
    case `build-html`:
    case `develop-html`:
      configRules = configRules.concat([
        {
          oneOf: [sassRuleModules, sassRule],
        },
      ])
      break
  }

  setWebpackConfig({
    module: {
      rules: configRules,
    },
  })
}

[freddydumont]

Thanks! I ended up inlining my svg but I'm sure your answer will help anybody who comes across this problem in the future, because there's currently no solution on all the issues mentioning Sass url() resolution in the repo.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!