Gatsby: Styles missing on production for SASS + CSS Module with gatsby-plugin-sass

Created on 11 Mar 2018 · 3Comments · Source: gatsbyjs/gatsby

Description

SASS + CSS Module cause issues on production build, part of styles are missing to be exact.

Steps to reproduce

Use gatsby new test to create a new project.
Add gatsby-plugin-sass and add it to gatsby-config.js.
Create styles.module.scss under src/components/Header with a simple .red { color: red; } within.
In src/components/Header/index.js, import styles from './styles.module.scss, and use it anywhere you want.
gatsby build then serve public

Expected result

Styles from layouts is missing from generated inline styles within <style id="gatsby-inlined-css">.
e.g. Styles for <body> should exist.

Actual result

It's gone.

Environment

Gatsby version: 1.9.231
gatsby-cli version: 1.1.45
Node.js version: 8.9.4
Operating System: macOS High Sierra

Minimum Reproducible Case

https://github.com/linmic/gatsby-module-issue

Source

linmic

👍1

Most helpful comment

There is an issue with a recent update of gatsby-plugin-sass the plugin author is looking into it A temporary solution is to specify the version of gatsby-plugin-sass #4457

chrisk2020 on 12 Mar 2018

👍2

All 3 comments

Replacing gatsby-plugin-sass with gatsby-plugin-postcss-sass seems works.

linmic on 12 Mar 2018

👍1

There is an issue with a recent update of gatsby-plugin-sass the plugin author is looking into it A temporary solution is to specify the version of gatsby-plugin-sass #4457

chrisk2020 on 12 Mar 2018

👍2

Fixed in #4495.