← Back

Override (theme views) in gatsby


TL;DR: replace relative imports to module imports when overriding files


To override a plugin, just create a folder with the name of the plugin inside your src folder. It's a matter of cut & paste.

When overriding views, most of them has references to other files in the plugin. You must replace the relative imports to the full path from the node module.

For example, the theme I use has this file:

@lekoarts/gatsby-theme-minimal-blog/src/components/tag.tsx:

/** @jsx jsx */
import { jsx, Styled } from "theme-ui"
import { Flex } from "@theme-ui/components"
import Layout from "./layout"
import useMinimalBlogConfig from "../hooks/use-minimal-blog-config"
import Listing from "./listing"
import SEO from "./seo"

...

and replaced the imports with this:

src/@lekoarts/gatsby-theme-minimal-blog/components/tag.tsx:

/** @jsx jsx */
import { jsx, Styled } from "theme-ui";
import { Flex } from "@theme-ui/components";
import Layout from "@lekoarts/gatsby-theme-minimal-blog/src/components/layout";
import useMinimalBlogConfig from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-minimal-blog-config";
import Listing from "@lekoarts/gatsby-theme-minimal-blog/src/components/listing";
import SEO from "./seo";

...