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.

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

[v2] Gatsby loading same styles twice #7765

Closed
outofthisworld opened this issue Aug 31, 2018 · 4 comments
Closed

[v2] Gatsby loading same styles twice #7765

outofthisworld opened this issue Aug 31, 2018 · 4 comments

Comments

@outofthisworld
Copy link
Contributor

outofthisworld commented Aug 31, 2018

In gatsby I have two pages (index and page2) which share a common layout this layout imports a layout.css file.

When visiting the index page for the first time I see that the styles from the layout.css file are inlined
<style data-href="/component---src-pages-index-js.464c799ae291bbeb7632.css">...styles</style>

But also that page2 has its own stylesheet generated and is included as a link tag on the index page also.
<link rel="stylesheet" type="text/css" href="/component---src-pages-page-2-js.464c799ae291bbeb7632.css">

When inspecting the dom, both these files are exactly the same (same content hashes) and also override styles of each other.

I'm new to gatsby and trying to understand how everything is being built and what's happening in this circumstance, so this may very well be intentional.. but could someone explain what's happening here and why this is necessary?

Thanks!

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve:'gatsby-source-filesystem',
      options:{
        path:`${__dirname}/src`
      }
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    `gatsby-transformer-remark`,
    'gatsby-plugin-offline',
  ],
}

@outofthisworld outofthisworld changed the title Gatsby loading same styles twice [v2] Gatsby loading same styles twice Aug 31, 2018
@azdanov
Copy link
Contributor

azdanov commented Aug 31, 2018

Similar issue to #7517.

@l0co
Copy link

l0co commented Oct 26, 2018

@azdanov It doesn't seem to be similar to #7517, which is about duplicating the same css classes on single page, while this one is about forcefully embedding the same (potentially large) stylesheets on each website page.

@pringshia
Copy link

@l0co - ever figure out a solution to this?

@l0co
Copy link

l0co commented Feb 26, 2020

@pringshia It was some time ago so I don't remember exactly but AFAIR I completely disabled embedding stylesheets in HTML because it looks a bit like a nonsense.

See here #1526 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants