gatsby-plugin-sass not working with imported sass files that have a property with "url(...)"

[onetwothreebutter]

Description

I have a series of imports of sass files and when I try to compile them with gatsy-plugin-sass I get the following error.

These relative modules were not found:

* ../../global/fonts/brandonprinted-one-webfont.eot in ./~/css-loader!./~/sass-loader?sourceMap!./src/page-assets/work-ive-done/subpages/web-animations/styles/web-animations.sass

I've fixed the issue by copying gatsby-plugin-sass's config to my gatsby-node.js and using resolve-url-loader (see my gatsby-node.js below). I also disabled gatsby-plugin-sass.

Should resolve-url-loader be added to gatsby-plugin-sass?

Environment

Gatsby version: 1.1.28
Node.js version: 8.0.0
Operating System: MacOS 10.13.2

File contents (if changed):

gatsby-config.js:
module.exports = { siteMetadata: { title: 'Gatsby Default Starter', }, plugins: ['gatsby-plugin-react-helmet'], };

package.json:
{ "name": "gatsby-starter-default", "description": "Gatsby default starter", "version": "1.0.0", "author": "Kyle Mathews <mathews.kyle@gmail.com>", "dependencies": { "gatsby": "^1.9.153", "gatsby-link": "^1.6.34", "gatsby-plugin-react-helmet": "^2.0.3", "gatsby-plugin-sass": "^1.0.15", "react-helmet": "^5.2.0" }, "keywords": [ "gatsby" ], "license": "MIT", "main": "n/a", "scripts": { "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "prettier": "^1.10.2", "resolve-url-loader": "^2.2.1" } }

gatsby-node.js:
`const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { cssModulesConfig } = require('gatsby-1-config-css-modules')

exports.modifyWebpackConfig = ({ config, stage }, options) => {
const sassFiles = /.s[ac]ss$/
const sassModulesFiles = /.module.s[ac]ss$/
const sassLoader = 'sass?${JSON.stringify(options)}'
switch (stage) {
case 'develop': {
config.loader('sass', {
test: sassFiles,
exclude: sassModulesFiles,
loaders: ['style', 'css', 'resolve-url-loader', 'sass-loader?sourceMap']
});

        return config;
    }
    default: {
        return config
    }
}

}`

gatsby-browser.js:
gatsby-ssr.js:

Actual result

These relative modules were not found:

* ../../global/fonts/brandonprinted-one-webfont.eot in ./~/css-loader!./~/sass-loader?sourceMap!./src/page-assets/work-ive-done/subpages/web-animations/styles/web-animations.sass

Expected behavior

Sass should be compiled without error.

Steps to reproduce

1. import a sass file into another sass file that has a url(..), like background-image: url(..)

2. run gatsby develop with gatsby-plugin-sass installed

...

[calcsam]

Can you upload an example repo demonstrating this? Eg branching off this: https://github.com/gatsbyjs/gatsby/tree/master/examples/using-sass

[onetwothreebutter]

Ok, will do!

[onetwothreebutter]

Ok, let me know the error happens for you when you run gatsby develop.

https://github.com/onetwothreebutter/using-sass-ericdjohnson

[kripod]

@KyleAMathews I think this should be added as a milestone for v2, as using a relative path for an url() import is a fairly frequent use-case.

[kripod]

By the way, gatsby develop works fine for me, but gatsby build doesn't.

The bug can be reproduced with simonyiszk/schdesign-web@84dbf16 by uncommenting the following line: https://github.com/simonyiszk/schdesign-web/blob/84dbf168b82cd4853d24586607f9b4d2fb7864ae/src/components/AboutSection.module.scss#L45

[KyleAMathews]

@kripod what's the relationship to v2? Seems like it could be solved now by someone who cares about this use case and wants to PR a fix to gatsby-plugin-sass.

[kripod]

@KyleAMathews Fair point, I forgot that this issue is also present in v1.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!