gatsby: [1.0] @import inside of CSS file leads to built production site errors

Using latest gatsby 1.x here. Inside of my layouts/index.js I am importing my main style.css file.

import styles from 'css/style.css'

My style.css imports some modules like this:

@import 'normalize.css';
@import 'basscss';

Everything runs fine in development, but when building and pushing to production I get the error:

style.css:4 Uncaught Error: Cannot find module "-!../../node_modules/css-loader/index.js!./basscss"
    at style.css:4
    at Object../src/css/style.css (style.css:4)
    at t (bootstrap 673de47…:52)
    at Object../node_modules/babel-loader/lib/index.js?{"presets":["/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-react/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-es2015/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-stage-1/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-es2015/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-stage-0/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-react/lib/index.js"],"plugins":["/Users/Gosset/Dev/mono2ski/node_modules/gatsby/dist/utils/babel-plugin-extract-graphql.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-plugin-add-module-exports/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-plugin-add-module-exports/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-plugin-add-module-exports/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-plugin-transform-object-assign/lib/index.js"],"cacheDirectory":true}!./src/layouts/index.js (index.js:4)
    at t (bootstrap 673de47…:52)
    at index.js?3cb6:3
    at window.webpackJsonp (bootstrap 673de47…:20)
    at layout-component---index-6152920….js:1
(anonymous)	@	style.css:4
./src/css/style.css	@	style.css:4
t	@	bootstrap 673de47…:52
./node_modules/babel-loader/lib/index.js?{"presets":["/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-react/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-es2015/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-stage-1/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-es2015/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-stage-0/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-preset-react/lib/index.js"],"plugins":["/Users/Gosset/Dev/mono2ski/node_modules/gatsby/dist/utils/babel-plugin-extract-graphql.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-plugin-add-module-exports/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-plugin-add-module-exports/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-plugin-add-module-exports/lib/index.js","/Users/Gosset/Dev/mono2ski/node_modules/babel-plugin-transform-object-assign/lib/index.js"],"cacheDirectory":true}!./src/layouts/index.js	@	index.js:4
t	@	bootstrap 673de47…:52
(anonymous)	@	index.js?3cb6:3
window.webpackJsonp	@	bootstrap 673de47…:20
(anonymous)

Although the CSS is all there in production, it seems to still be trying to import it from my local setup. This error makes clicking any links cause a full page refresh.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 6
Comments: 18 (14 by maintainers)

Links to this issue

Reactjs - Demo Application is not working - Stack Overflow

Most upvoted comments

Hey @gosseti, your solution had been working for me and then stopped as well. This seems to be working for me now:

if (
  process.env.NODE_ENV === `development` ||
  (process.env.NODE_ENV === `production` && process.browser !== true)
) {
  require('../css/main.css')
}

…where main.css is my source stylesheet in the css directory. Within that, I’m using some PostCSS features, but no PostCSS plugins beyond what comes with Gatsby.

The issue was the same as you’d described here https://github.com/gatsbyjs/gatsby/issues/1086#issuecomment-306089833 but now you get client side JS errors (even in production) if you keep the require statement, and if you remove it, you end up with an empty CSS file in public/styles.css (I got tripped up a few times thinking I’d fixed it other ways, but the contents of the public/ don’t seem to get deleted automatically).

With the conditional, you’ll get the stylesheet required by Webpack in development mode, and in production mode when you run gatsby build so the styles actually get compiled, but you won’t have the require causing errors when you visit the index page in the browser.

So this works, but it also seems like it might not be the desired behaviour.

kennethormandy on Aug 24, 2017

I am also getting this issue - importing a CSS file from layouts/index.js is fine when running gatsby develop, but I’m getting ‘cannot find module’ errors for the imported CSS file after running gatsby build.

Whilst the workaround suggested by @kennethormandy works, I suspect there may be an issue with the webpack config for production builds?

gatsby-console-error

bishsbytes on Nov 3, 2017

I had the same issue cause of basscss. I had to import it like this: @import 'basscss/css/basscss.css'; Can be related to https://github.com/basscss/basscss/issues/213

Grsmto on Oct 2, 2017

Solved! It seems with 1.x there is no need to require styles inside of your layouts/index.js file for production. It now auto checks the css directory and includes any files you have in there.

In development layouts/index.js you’ll still need to have:

if (process.env.NODE_ENV === `development`) {
  require('css/styles.css')
}

Is this the desired behaviour?

gosseti on Jun 5, 2017