gatsby-plugin-sass working fine with "gatsby develop" but not after "gatsby build"

Created on 27 Aug 2017 · 17Comments · Source: gatsbyjs/gatsby

Am I doing something wrong? Or is this a bug? Everything works fine while I'm developing using "gatsby develop" but when I do "gatsby build" the styles are not being added.

Source

BosEriko

Most helpful comment

Hi,

I'm facing same problem. I have no custom html.js. On local everything works. Even gatsby build works fine.

When builds run on Netlify there is a problem - no sass compiled styles.

Only thing that I notice during the build is that:

8:22:16 PM: warning Unmet peer dependency "react@>=15.0.0".
8:22:16 PM: warning Unmet peer dependency "react@^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0".
8:22:16 PM: warning Unmet peer dependency "react-dom@^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0".
8:22:16 PM: warning Unmet peer dependency "graphql@>=0.4.0".
8:22:16 PM: warning Unmet peer dependency "react@^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0".
8:22:16 PM: warning Unmet peer dependency "caniuse-db@^1.0.30000652".

But to be honest no idea how to solve it.

My package.json:

{
  "name": "xxxxx",
  "description": "xxxxx",
  "version": "1.0.0",
  "author": "Mateusz Suchoń <[email protected]",
  "dependencies": {
    "gatsby": "^1.9.197",
    "gatsby-link": "^1.6.37",
    "gatsby-plugin-offline": "^1.0.14",
    "gatsby-plugin-react-helmet": "^2.0.5",
    "gatsby-plugin-sass": "^1.0.17",
    "gatsby-source-contentful": "^1.3.38",
    "gatsby-transformer-remark": "^1.7.32",
    "react-helmet": "^5.2.0",
    "react-select": "^1.2.1",
    "style-loader": "^0.13.2"
  },
  "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"
  }
}

suchy on 21 Feb 2018

👍4

All 17 comments

I'm using gatsby-plugin-sass and don't have this issue. Can you provide more details?

mingaldrichgan on 27 Aug 2017

everything compiles normally, though. no errors whatsoever. but yeah, every time I try to compile with gatsby build, sass is not being added. no styles.

I wonder if you can replicate it? here's what I'm working on using gatsbyjs
https://github.com/BosEriko/Bos-Eriko-Network

BosEriko on 27 Aug 2017

If you're using a custom html.js try deleting it.

KyleAMathews on 27 Aug 2017

You likely forgot to inject those styles properly. Take a look at the sass example in src/html.js

let stylesStr
if (process.env.NODE_ENV === `production`) {
  try {
    stylesStr = require(`!raw-loader!../public/styles.css`)
  } catch (e) {
    console.log(e)
  }
}

class Html extends Component {
  render() {
    let css
    if (process.env.NODE_ENV === `production`) {
      css = (
        <style
          id="gatsby-inlined-css"
          dangerouslySetInnerHTML={{ __html: stylesStr }}
        />
      )
    }

and later, in the <head>

          <title>Using gatsby-plugin-sass</title>
          {css}
       </head>

Or, like @KyleAMathews said, replace your current html.js file with the default one by removing yours.

gtfargo on 30 Aug 2017

I'm having the same problem. Or well, it works with both gatsby develop and gatsby build on my development machine (Mac).

But when it builds on Netlify (probably a docker image with ubuntu), none of my Sass files are included in the gatsby-inlined-css section

Aleksion on 4 Sep 2017

We are having the same issue on Netlify. I was able to fix it a couple of days ago by making sure the NODE_ENV environment variable was set to production on the build there. I've got it now on a branch/PR for a project that that isn't fixing.

danielfarrell on 5 Sep 2017

We worked with Netlify yesterday on this and they appear to have fixed the issue for those having it specifically on Netlify.

danielfarrell on 7 Sep 2017

@danielfarrell - any idea why it happened on Netlify? because of the node_environment? Though I was fairly sure it was production already

Aleksion on 8 Sep 2017

@Aleksion Unfortunately not. We got a "We've resolved the issue in our build network" and that was it.

danielfarrell on 8 Sep 2017

This doesn't work for me either. Importing .scss file works in develop but not when running build. PLEASE PLEASE PLEASE update webpack - makes it hard to debug when we have to use deprecated modules.

pizzarob on 17 Nov 2017

@realseanp we hear you, no need to chime in on every old issue about it :)

updating webpack is significant and breaking change so its not simple to just update. The work on that is happening on the v2 branch and you can try out the prereleases to use the latest webpack thanks!

jquense on 17 Nov 2017

Fantastic! @jquense Thanks 🙏 I will look at the v2 branch - And trust me I know updating webpack in a monorepo is a lot of work. But work that needs to be done nonetheless.

pizzarob on 18 Nov 2017

Closing out older issues — thanks for everyone that participated on this thread — please open more issues if you need help!

KyleAMathews on 20 Dec 2017

Hi,

I'm facing same problem. I have no custom html.js. On local everything works. Even gatsby build works fine.

When builds run on Netlify there is a problem - no sass compiled styles.

Only thing that I notice during the build is that:

8:22:16 PM: warning Unmet peer dependency "react@>=15.0.0".
8:22:16 PM: warning Unmet peer dependency "react@^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0".
8:22:16 PM: warning Unmet peer dependency "react-dom@^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0".
8:22:16 PM: warning Unmet peer dependency "graphql@>=0.4.0".
8:22:16 PM: warning Unmet peer dependency "react@^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0".
8:22:16 PM: warning Unmet peer dependency "caniuse-db@^1.0.30000652".

But to be honest no idea how to solve it.

My package.json:

{
  "name": "xxxxx",
  "description": "xxxxx",
  "version": "1.0.0",
  "author": "Mateusz Suchoń <[email protected]",
  "dependencies": {
    "gatsby": "^1.9.197",
    "gatsby-link": "^1.6.37",
    "gatsby-plugin-offline": "^1.0.14",
    "gatsby-plugin-react-helmet": "^2.0.5",
    "gatsby-plugin-sass": "^1.0.17",
    "gatsby-source-contentful": "^1.3.38",
    "gatsby-transformer-remark": "^1.7.32",
    "react-helmet": "^5.2.0",
    "react-select": "^1.2.1",
    "style-loader": "^0.13.2"
  },
  "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"
  }
}

suchy on 21 Feb 2018

👍4

I am having the same problem.

sepehr500 on 26 Feb 2018

I have the same problem as well

withoutwax on 3 May 2019

~this issue is coming back. my gatsby info is~

  System:
    OS: macOS 10.14.4
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.4.0 - ~/.nvm/versions/node/v10.4.0/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v10.4.0/bin/npm
  Languages:
    Python: 3.6.3 - /usr/local/anaconda/anaconda3/bin/python
  Browsers:
    Chrome: 74.0.3729.131
    Firefox: 65.0
    Safari: 12.1
  npmPackages:
    gatsby: ^2.5.0 => 2.5.0 
    gatsby-image: ^2.0.41 => 2.0.41 
    gatsby-plugin-manifest: ^2.1.1 => 2.1.1 
    gatsby-plugin-offline: ^2.1.0 => 2.1.0 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 
    gatsby-plugin-sass: ^2.0.11 => 2.0.11 
    gatsby-plugin-sharp: ^2.0.37 => 2.0.37 
    gatsby-source-filesystem: ^2.0.35 => 2.0.35 
    gatsby-transformer-sharp: ^2.1.19 => 2.1.19 
  npmGlobalPackages:
    gatsby-cli: 2.5.12

My silly mistake. I was using

<Button href="/path/to/page">blah blah</Button>

When I changed to use Gatsby Link, it works

<Link to="/path/to/page">
  <Button>blah blah</Button>
</Link>

micksatana on 16 May 2019

Was this page helpful?

0 / 5 - 0 ratings

Related issues

linkPrefix weirdness

benstr · 3Comments

[gatsby-transformer-json] Filter data by attribute

signalwerk · 3Comments

Don't trigger onRouteUpdate on hash updates

brandonmp · 3Comments

[gatsby-remark-images] Adjust image quality?

dustinhorton · 3Comments

Graphql: Fix better error message when duplicate query name

timbrandin · 3Comments