Gatsby: Styles.css is 0 bytes after building with SASS

[rdrnt]

Description

Hi! I'm having an issue where if I build my Gatsby project on my machine, Styles.css is being populated (It's not 0 bytes). Though if I build it on another machine, Styles.css is 0 bytes, but the build still succeeds. I'm using SASS, I haven't modified the webpack myself, and I'm using gastby-plugin-sass.

Not only is this issue happening with my project, but it's also happening with the 'using-sass' example.

Environment

Gatsby version: 1.9.103
Node version of my machine: 8.9.4
Node version of machine that won't work: 8.7.0
Operating System: MacOS 10.12.6

File contents (if changed):

If you would like the file contents of my project let me know. I didn't bother with them since this issue is also reproducible for me in the using-sass example, which is on Github.

Actual result

Running gatsby build on my local machine populates public/styles.css, but running in any other environment results in public/styles.css being empty.

Expected behavior

Styles.css should not be empty.

[fk]

So that other machine is using Node.js v5.6.0? What Node.js version are you using on you machine – where I understand using-sass is working fine?

[rdrnt]

@fk Hey sorry, I updated my issue with the correct information. My node version on my machine is v8.9.4, in the other environment where it's not working, it's node v8.7.0.

[ghost]

I'm using gatsby-plugin-sass-postcss and it works pretty well on my local machine and netlify. You should be able to easy switch since its just sass + postcss.
https://github.com/gatsbyjs/gatsby/tree/master/examples/using-postcss-sass

[rdrnt]

@dotmagic Issue persists :(

[fk]

FWIW ("works on my machine" doesn't help, I know :-/) – I just tried (both using-sass and using-postcss-sass) with Node 8.7.0 on OS X 10.11.6, all fine with gatsby build.

@rdrnt Could you update the issue so that it lists the problematic Node.js version (I understand everything works with 8.9.4 on your machine)?

A shot in the dark: Try to update Gatsby and gatsby-cli to the latest versions?

[rdrnt]

@fk So far, it's fine with node versions 8.9.4 & 9.3.0. The environment where it doesn't work is 8.7.0, BUT if I downgrade my machine to 8.7.0 it still works. (I've also updated the issue with this).

I've updated Gatsby & Gatsby-cli to the latest, works on my machine, but not the other machine :(.

After typing the above, I deleted my project and cloned it again, ran yarn and then npm rebuild node-sass --force. And now it's working properly (Hopefully I didn't jinx myself).

Thanks for the help!

[fk]

Thanks for the help!

Didn't do much! Thank you for reporting and following up with the solution!
Glad it's working now (and hopefully continues to do so)!

[Takeno]

Same problem here.

We've worked on a site with gastby and when it is built in local machine, everything is fine. We noticed this bug in our CI pipeline where it produces a 0 byte styles.css.

We can't find a fix, but we've found a way to reproduce locally: using docker.

docker run -v `pwd`:/app -w /app node:9 bash -c "npm install && npm run build"

What we have tried:

• rebuild node-sass --force
• gatsby-plugin-postcss-sass module
• Node version 9, 8 and 6.

[rdrnt]

@takeno Are you using Jenkins?

[Takeno]

@rdrnt Nope, we're using Bitbucket Pipelines.

[drobinhood]

I'm experiencing this issue, has anyone found a solution?

The build spits out the correct style.css, when built on netlify this file is 0 bytes.

[Takeno]

@drobinhood Unfortunately none solution from my side. I had to deploy via FTP and I had no time to debug the plugin.

[drobinhood]

@Takeno was able to narrow down the issue I was having to an issue with an @font-face rule. Not sure if that helps you.

[Takeno]

@drobinhood no way. We're also tried with a one-rule css. public/style.css is generated but it is empty.

[Takeno]

Probably fixed in #4495. See #4477
Meanwhile this can be a fix: https://github.com/gatsbyjs/gatsby/issues/4457#issuecomment-371859766