Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

custom webpack config fails / how to mini-css-extract? #9807

Closed
gjhltn opened this issue Nov 8, 2018 · 4 comments · May be fixed by ajesse11x/gatsby#424, saurabharch/gatsby#379, MaxMood96/gatsby#30 or saurabharch/gatsby#2051
Closed

custom webpack config fails / how to mini-css-extract? #9807

gjhltn opened this issue Nov 8, 2018 · 4 comments · May be fixed by ajesse11x/gatsby#424, saurabharch/gatsby#379, MaxMood96/gatsby#30 or saurabharch/gatsby#2051
Labels
status: needs more info Needs triaging and reproducible examples or more information to be resolved

Comments

@gjhltn
Copy link

gjhltn commented Nov 8, 2018 •
edited
Loading

Hi

I need to reuse the css Gatsby is building and would like to output it to a separate css file. In the past I've used the mini-css-extract plugin with webpack, but adding this to Gatsby doesnt work as I'd hoped, i think because Gatsby already uses it internally. Any ideas how i can get my css output to a file?
@kakadiadarpan
Copy link
Contributor

@gswirrl can you please provide environment information for your project by running gatsby info --clipboard?

@kakadiadarpan kakadiadarpan added the status: needs more info Needs triaging and reproducible examples or more information to be resolved label Nov 8, 2018
@gjhltn gjhltn changed the title mini-css-extract how-to custom webpack config fails / how to mini-css-extract? Nov 9, 2018
@kakadiadarpan
Copy link
Contributor

@gswirrl mini-css-extract-plugin should support extracting several files, I'll check this.

@gjhltn
Copy link
Author

gjhltn commented Nov 21, 2018 •
edited
Loading

Ok so for the record, here's how to get Gatsby to build multiple named stylesheets and use them instead of inlining the css into the head of the html.

There are 3 things you need to do:

  1. modify html.jsto hard link to the built files
import React from "react"
import PropTypes from "prop-types"

export default class HTML extends React.Component {
  render() {
    let headComponents = this.props.headComponents
    let css
    if (process.env.NODE_ENV == `production`) {
      headComponents = headComponents.filter(component => component.type !== 'style')
      css = (<><link rel="stylesheet" href="/foo.css"/><link rel="stylesheet" href="/bar.css"/></>)
    }
    return (
      <html {...this.props.htmlAttributes}>
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {headComponents}
          {css}
        </head>
        <body {...this.props.bodyAttributes}>
          {this.props.preBodyComponents}
          <div
            key={`body`}
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}
        </body>
      </html>
    )
  }
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}
  1. modify gatsby-node.js to add new entry points
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

exports.onCreateWebpackConfig = ({
  actions,
  stage,
  getConfig
}) => {
  // needed to output correctly-named css
  actions.setWebpackConfig({
    plugins: [new MiniCssExtractPlugin({})],
  })
   // needed to bodge in new css entry points
  if (stage.includes('javascript')) {
    let config = getConfig()
    config.entry["foo"] = './src/css/entry-points/foo.css'
    config.entry["bar"] = './src/css/entry-points/bar.css'
    actions.replaceWebpackConfig(config)
  }
}
  1. make HMR / gatsby develop work by modifying gatsby-browser.js to include the entry points. this is a bit unsatisfactory but it works for my case. ymmv
import "./src/css/entry-points/foo.css"
import "./src/css/entry-points/bar.css"

@gjhltn
Copy link
Author

gjhltn commented Nov 25, 2018

(so this issue can be closed :-)

This was referenced Jul 17, 2020
Open
Open
@snyk-bot snyk-bot mentioned this issue Aug 24, 2021
Open
@saurabharch saurabharch mentioned this issue Apr 28, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status: needs more info Needs triaging and reproducible examples or more information to be resolved
Projects
None yet
Milestone
No milestone
3 participants
@kakadiadarpan @LekoArts @gjhltn