gatsby-plugin-sass not working with imported sass files that have a property with "url(...)" #3665
Description
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 <[email protected]>", "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
...