Gatsby: Using different CSS file for different pages

[exrishu]

Is there is any way we can we can import different CSS file for different pages?

[haysclark]

@exrishu Are you referring to doing this dynamically in _gatsby-node.js_?

If so, check out the docs for bound-action-creators. I believe the solution would be to dynamically change the 'component' used per page, as components have the formatting.

If you are not talking about dynamic stuff, then just hard code something like this in your JSX file:

import "./some.css";

[exrishu]

Thanks for the help, but I am in no mood to modify gatsby-node.js. and the second option I have tried already but still it is it is overriding CSS of another page.
I want index.css (which is in layouts folder) to inject every page and also I have different css file for different pages inside the

-pages
     -about
            -index.js
            -style.css
    -home
           -index.js
           -style.css

I am importing style.css in index.js for every page but it I don't have any idea when the site is developed every css file is included inside the head component.

[KyleAMathews]

Try using CSS modules so your selectors don't conflict https://www.gatsbyjs.org/tutorial/part-two/#css-modules

[exrishu]

Finally figured out, This is what I have done

import React from "react"
import Link from  'gatsby-link'
import { withPrefix } from "gatsby-link"

const IndexLayout = ({location }) => {
    if (location.pathname === withPrefix ("/test")){
        require("./test.css")
    }
        else{
            console.log("fail")
        }

  return (
    <div>
      <h2>Welcome</h2>
    </div>
  );
};


export default IndexLayout

I have accessed the current location of the page, and according to page imported the CSS file.

[rozenmd]

In my case it was just a matter of adding
require('./index.css')
within the render method of my landingPage layout file and boom, selective styling.

[exrishu]

@rozenmd I also tried the same way but my requirements was to import different CSS for each page, and I was not in the mood to use CSS modules, So I figured out the uniqueness for every component which was the URL and rest code says it all.

[NeeldeepRoy]

Hi @exrishu
I am facing an issue where styles from other Pages are overwriting my Page specific styles. How can I avoid that?

[jackhair]

Thanks for your solution @exrishu, it works but we have ran in to a problem when switching between layouts.

When switching between layouts, Gatsby will retain the stylesheet from the previous layout and include the new one. Eventually you end up with every layouts "unique" stylesheet all bundles together, which for us has caused style conflicts.

[Patapinh0]

Same problem here. I have tried A LOT of different things these last days, and I was about to post a new issue. With require(), I can get an elegant switching from page A to page B ... but when returning to page A, it keeps the stylesheet from page B active, even though both pages require() their own specific stylesheet. The same happens when I require() stylesheets by comparing to the current URL (location.pathname).

I've tried messing with Webpack, I've tried messing with require.cache (with the .loaded property or by deleting elements). I've tried with CSS Modules too, but for now it requires a bit too much work as it would require a lot of rewriting, at the current stage of my project. I will try to go that way if nothing else really works for me, but I'd love to find out if there is a simpler way to get Gatsby to avoid retaining the last required stylesheet as the unique stylesheet.

Being (quite) a bit newbish when it comes to webdev, I'm pretty sure there are a few options that I'm missing, though ...

edit : Could I try importing my .css files from another place, rather than in the pages and/or layouts ? Or in an other way ? Currently messing with lifecycles, but this doesn't seem to get me anywhere for now.

[Patapinh0]

Well, rewrote this as SCSS, and it works better than any hackish solution. Should have started there !

[marquez138]

Hi @exrishu
I am facing an issue where styles from other Pages are overwriting my Page specific styles. How can I avoid that?

Were you able to find a fix for this? Im also experiencing the same

[TibiTotoro]

I have a similar question, but the problem is not in the conflict of styles. On my project there are several pages with a very large css animation, and I would like not to load these styles inline on other pages where they are not needed. Is there any way to load on the page only those styles that apply to it?

[holloway]

Similar problem here too, but it's about CSS Properties (aka CSS Variables).

In this case it's not about switching between pages, it's just that Gatsby is adding CSS from pages that can't be reached from the current page.

I have a site that's a Design System / Pattern Library, with component examples in <iframe>s to isolate them from the site's theme, and those iframed pages are under /pages/iframed/thing.js. These iframed pages never have anything to do with the rest of the site, and they never import any other components at all, but Gatsby adds CSS from other parts of the site.

The CSS it adds includes :root { --varname: thing } which configures themes in these components and I don't want that. Unfortunately I can't scope my CSS selectors to distinguish between them because I'd lose IE11 compatibility due to the IE11 CSS vars polyfill only supporting :root .

Is there a way to truly isolate pages from one another within Gatsby?

(I'm guessing this is an optimisation to preload assets that could be used later, and that's very useful on other parts of the site but just not on these pages specifically.)

[seichodev]

I still have this issue, big problem. 3 different components are all borrowing from one another. Website looks ridiculous.

[HarshilShah]

I’m trying out the above solution from @exrishu but on the onRouteUpdate method in gatsby-browser.js and at first try it seems to be working here:

export function onRouteUpdate({ location }) {
    if (location.pathname === withPrefix(“/prefix")) {
        require('./src/styles/main.scss')
    }
}

This still isn’t granular enough for many use cases and so I’d love a more formal way of doing this, and ideally it'd be great if the CSS was only used if the current DOM contained a component which imported it, but this seems to be a way to accomplish this right now.

Update: This doesn’t actually work, I think it might’ve been some browser caching or something that made it seem to work in my brief testing, sorry.

[collinkrawll]

I solved it by namespacing the css and page using Sass and helmet. Note that this still includes the styles on every page (they just wont get applied). Here's how to do it:

1. Install the Sass plugin:

npm install --save node-sass gatsby-plugin-sass

1. Add Sass to your gatsby-config.js:

plugins: [`gatsby-plugin-sass`],

1. Rename mypage.css to mypage.scss
2. Wrap the css using scss like this:

mypage.css (old)

a {color: #5173bd;}
...

mypage.scss (new)

html.mypage {
a {color: #5173bd;}
...
}

1. Update the layout.js file to import the scss file and to set the class on the <html> tag using helmet:

...
import Helmet from 'react-helmet'
import "./mypage.scss"

const Layout = ({ children }) => {
  return (
    <>
    <Helmet>
      <html class="mypage"  lang="en" />
    </Helmet>
...

[harrygreen]

I tried the location.pathname tip from @HarshilShah and @exrishu, but the CSS from other pages was still bundled. I've had to go with a namespacing solution like @collinkrawll's for now, but it's not scalable at all. I've tried modifying the webpack config for CSS chunking, to no avail.

If anyone's managed to solve this, please shout!

[HarshilShah]

@harrygreen Yeah apologies about that, I found out some after that my solution didn’t work; seems like there might’ve been some browser caching that made it seem like it worked at the time. I’ve updated my comment above.

As for solving the problem, I’ve also gone with a namespacing solution for now. It’s ugly but it works for now.

[city17]

Did anyone find a non-hacky solution to this problem? The styles for one specific page are loading on all other pages, and the layout.js stylesheet is loading on the specific page as well. Don't understand why they are loading when they are not being imported..

[freesh]

Similar problem here too, but it's about CSS Properties (aka CSS Variables).

In this case it's not about switching between pages, it's just that Gatsby is adding CSS from pages that can't be reached from the current page.

I have a site that's a Design System / Pattern Library, with component examples in <iframe>s to isolate them from the site's theme, and those iframed pages are under /pages/iframed/thing.js. These iframed pages never have anything to do with the rest of the site, and they never import any other components at all, but Gatsby adds CSS from other parts of the site.

The CSS it adds includes :root { --varname: thing } which configures themes in these components and I don't want that. Unfortunately I can't scope my CSS selectors to distinguish between them because I'd lose IE11 compatibility due to the IE11 CSS vars polyfill only supporting :root .

Is there a way to truly isolate pages from one another within Gatsby?

(I'm guessing this is an optimisation to preload assets that could be used later, and that's very useful on other parts of the site but just not on these pages specifically.)

@holloway Did you find a solution? I've exact the same problem. :-/

// Edit: I figured out a solution with react helmet:

<Helmet
    style={[{
      "cssText": `
          :root {
            --color: red;
          }
      `
   }]}
/>

I have different layout components used by different pages. Every layout brings his own css variables within the helmet.

[holloway]

@freesh I ended up having a separate webpack build into /static/ to isolate them.