Gatsby: Extract the CSS out of style tag in separate stylesheets

Created on 30 Sep 2017 · 16Comments · Source: gatsbyjs/gatsby

I would love to extract the CSS out style tags into separate stylesheets, I am using Bootstrap within my site and it's less than ideal to load the full bootstrap with subsequent visits of the user. Is there any plugin for gatsby which solves this, like ExtractTextPlugin for Webpack? I can't find one

question or discussion

Source

abdulhannanali

Most helpful comment

This is the solution I'm using, if anyone wants an alternative.

if (process.env.NODE_ENV === "production") {
  for (const component of props.headComponents) {
    if (component.type === "style") {
      const index = props.headComponents.indexOf(component)
      const link = <link rel="stylesheet" href={component.props["data-href"]} />
      props.headComponents.splice(index, 1, link)
    }
  }
}

Glinkis on 1 Aug 2019

👍2

All 16 comments

Have you looked at using react-bootstrap?

There is also an example site here but never tried it.

sebastienfi on 1 Oct 2017

👎1

Gatsby does extract CSS but inlines it into the HTML <head> for performance.

If you create a custom html.js, you can link to the generated css file if you'd like.

You might be interested in this approach though which automatically removes excess CSS https://github.com/rongierlach/gatsby-plugin-purify-css

KyleAMathews on 1 Oct 2017

👎1

In my case, it doesn't extract it at all.
gatsby.config.js

module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sass'
  ],
};

layouts/index.js

import '../assets/sass/style.scss';

It works fine in development, but when running a production build it comes out completely unstyled with an empty style tag in the head. public/style.css is completely empty.

3stacks on 3 Oct 2017

👎1

@3stacks try to see if you can reproduce your issue with the sass example app.

KyleAMathews on 3 Oct 2017

@KyleAMathews , are you talking about this example?
https://github.com/gatsbyjs/gatsby/tree/master/examples/using-sass

Does this exist as a starter, or do I just copy these files and run my gatsby tasks?

3stacks on 4 Oct 2017

Just clone the repo and navigate to its directory. I'd love to make all the examples work as starters but that'll take some infrastructure work.

KyleAMathews on 4 Oct 2017

The sass example does work for me. I'll give it a shot converting the blog over to use that sass example tonight. I have a feeling this is just a bizarre edge case, because sass has been misbehaving from the start for me.

3stacks on 5 Oct 2017

As I started migrating my stuff, I saw the stuff getting spit out into public/style.css, but when I look at the HTML I see this.

<style id="gatsby-inlined-css">[object Object]</style>

3stacks on 5 Oct 2017

Closing this issue as it's fairly old and we have far too many open issues! If you have additional problems in this area, please open a new issue!

KyleAMathews on 27 Jun 2018

Hey @3stacks.
It looks like solution not to hard to maintain by html.js extraction.
Just follow https://www.gatsbyjs.org/docs/custom-html/

And then replace default logic around css like:
Before:

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

After:

    if (process.env.NODE_ENV !== `production`) {
      css = (
        <style
          id="gatsby-inlined-css"
          dangerouslySetInnerHTML={{ __html: stylesStr }}
        />
      )
    } else {
      css = (<link rel="stylesheet" href="/styles.css"/>)
    }

This solution doesn't cover any pathPrefix, but as initial solution can help to reduce size of all html files

Pencroff on 4 Aug 2018

👍2

Thanks for the info @Pencroff! I started again from a new starter and that solved the problem for me, but good for the public record.

3stacks on 7 Aug 2018

Hi @Pencroff thanks for the tip! I have a similar requirement and would need to extract the CSS into separate stylesheets. However, where is stylesStr being declared from?

wongsynee on 25 Sep 2018

Hi @Pencroff thanks for the tip! I have a similar requirement and would need to extract the CSS into separate stylesheets. However, where is stylesStr being declared from?

I have on top of html.js code like:

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

Pencroff on 25 Sep 2018

👍1

Thanks @Pencroff

wongsynee on 25 Sep 2018

For some reason when I run build, a styles.css file is not created but something like component---src-pages-index-js.341e385fbf9137261e9d.css is created as a stylesheet.

I'm using the sass-example from Gatsby with the following in the config:

module.exports = {
  plugins: [
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `UA-93349937-2`,
      },
    },
    `gatsby-plugin-offline`,
  ],
}

Dependencies:

"dependencies": {
  "gatsby": "^2.0.0",
  "gatsby-plugin-google-analytics": "^2.0.5",
  "gatsby-plugin-offline": "^2.0.5",
  "gatsby-plugin-sass": "^2.0.1",
  "node-sass": "^4.9.0",
  "raw-loader": "^0.5.1",
  "react": "^16.3.0",
  "react-dom": "^16.3.0",
  "tachyons-sass": "^4.7.1"
}

wongsynee on 26 Sep 2018

This is the solution I'm using, if anyone wants an alternative.

if (process.env.NODE_ENV === "production") {
  for (const component of props.headComponents) {
    if (component.type === "style") {
      const index = props.headComponents.indexOf(component)
      const link = <link rel="stylesheet" href={component.props["data-href"]} />
      props.headComponents.splice(index, 1, link)
    }
  }
}

Glinkis on 1 Aug 2019

👍2

Was this page helpful?

0 / 5 - 0 ratings