gatsby: importing css module with background image rules results in compilation error.

Description

When using background image in css (using css modules) like: body{ color:#888; background: url('../staticFiles/images/san-francisco.jpg') center no-repeat; }

getting the following error: `Loader D:\Personal\Projects\gatsby\myPage\node_modules\url\url.js?{“limit”:10000,“name”:“static/[name].[hash:8].[ext]”} didn’tstcss-loader!./src/layouts/index.module.css 6:61-111 return a function

@ ./~/css-loader?modules&minimize&importLoaders=1&localIdentName=[path]—[name]—[local]—[hash:base64:5]&sourceMap!./~/postcss-loader!./src/layouts/index.module.css 6:61-111`

This issue is exactly similar to the comment by @rossthedevigner under closed issue #3478

Environment

  • Gatsby version : 1.9.260
  • gatsby-cli version : 1.1.51
  • Node.js version: 8.1.3
  • Operating System: Microsoft Windows 10

File contents

gatsby-config.js: module.exports = { siteMetadata: { title: ‘Personal site’, }, plugins: [ ‘gatsby-plugin-react-helmet’, { resolve: ‘gatsby-plugin-typography’, options: { pathToConfigModule: ‘./src/utils/typography.js’, }, }, { resolve: gatsby-source-filesystem, options: { path: ${__dirname}/src/staticFiles, name: ‘markdown-pages’, }, }, gatsby-transformer-remark, gatsby-transformer-json, gatsby-transformer-sharp, gatsby-plugin-sharp, ], }`

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 4
  • Comments: 20 (8 by maintainers)

Most upvoted comments

FWIW the fix was adding url-loader to my package.json

Same issue here on gatsby 1.9 I couldn’t import images and npm install url-loader --save-dev solved it