seo Question posted in
Some basic information to get you started with this can be found here.

how to deal with imports when shadowing component – SEO

When shadowing a Gatsby theme how does one deal with import calls to components that does not need any changes. From my understanding the only files that should be present in the directory if you are shadowing are the source code for the component you wish to change.

For example in original index.js, I have the following imports

import { graphql } from "gatsby"
import React from "react"
import CustomFonts from "../components/custom-fonts/custom-fonts"
import Footer from "../components/footer/footer"
import Header from "../components/header/header"
import SEO from "../components/seo/seo"
import Sidebar from "../components/sidebar/sidebar"
import "../styles/style.css"

If i wanted to shadow index.js how would i import these components? or would all the imports have to be present locally?

I think this is the relevant Gatsby documentation on this? https://www.gatsbyjs.org/docs/themes/shadowing/#extending-shadowed-files ,but im still some what confused after reading it.

Any help would be much appreciated

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Well this turned out to be a really dumb question, just use the plugin resolve path under gatsby-config.js


  2. 0

    @CrustyWang ‘s answer is correct…but here’s how to do it in code.

    Let’s say you have a module fontcula in your node_modules which has the following style files on the path –
    node_modules/fontcula/src/styles/

    • index.ts
    • global.ts
    • media.ts

    where index.ts is –

    import { media } from "@styles/media";

export { globalStyles, media };

    Let’s say we want to add a new set of fonts in a file fonts.ts which we want to be exported from index.ts. To do this we need to do the following –

    1. On the path project_folder/src/fontula/styles add font.ts and add whatever it is that needs adding there….

    2. on the same path recreate index.ts as –

    import { globalStyles } from "fontcula/src/styles/global";
import { media } from "fontcula/src/styles/media";
import { fonts } from "./fonts"

export { globalStyles, fonts, media };

    and you are good to go.

    The operative part being pulling in globalStyles and media from their source in the node_modules folder

    Login or Signup to reply.
  3. 0 
    - node_modules
  - @leokoarts
    - gatsby-theme-cara
      - src
        - components ...

    It wasn’t immediately clear to me either. You need to use the node module location for your import, in a shadowed file, instead of a relative path. In my case:

    import About from "@lekoarts/gatsby-theme-cara/src/components/about";

    Instead of

    import About from "../components/about";
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search