无法覆盖从 gatsby-starter-rocket-docs 创建的文档站点上的样式（着色和 svg 图像）

Question

我正在使用 gatsby starter gatsby-starter-rocket-docs 创建一个文档站点。我希望侧边栏的 header 与默认图像不同。目前，图像来自节点模块中定义的 svg，而不是存储库的代码本身。节点模块不是持久化的，因此不能在那里进行更改。我需要覆盖节点模块中定义的样式（通过 npm install gatsby 安装在文件夹中），但我需要从持久化的代码中进行。

这是我要替换的图片：

这个问题有更详细的定义 here, and here 是包含所有代码的存储库。该问题还提到更改侧边栏中突出显示链接的颜色，这应该有一个类似的修复，因为它的突出显示颜色也在节点模块中定义。然而，图像是更重要的问题。

Answer 1

正如您所说，当您处理 Gatsby 主题时，您需要付出额外的努力来覆盖主题核心中的默认配置设置。 Gatsby 允许您使用 concept known as "shadowing" 来实现它。基本上是一个覆盖默认配置的自定义配置（从徽标到 CSS，等等）。来自他们的文档：

Gatsby themes introduce a concept called “shadowing”. This feature allows users to replace a file in the src directory that is included in the webpack bundle with their own implementation. This works for React components, pages in src/pages, JSON files, TypeScript files, as well as any other imported file (such as .css) in your site.

A practical use case is when you’ve installed gatsby-theme-blog and want to customize the author Bio component to add your own biographical content. Shadowing lets you replace the theme’s original file, gatsby-theme-blog/src/components/bio.js, with your own file to make any changes you need.

您需要使用您自己的组件、资产和样式重新创建主题结构（在 node_modules 中检查它）。例如，给定结构：

├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
└── src
    ├── components
    │   ├── bio-content.js
    │   ├── bio.js
    │   ├── header.js
    │   ├── home-footer.js
    │   ├── layout.js
    │   ├── post-date.js
    │   ├── post-footer.js
    │   ├── post-hero.js
    │   ├── post-link.js
    │   ├── post-list.js
    │   ├── post-title.js
    │   ├── post.js
    │   ├── posts.js
    │   └── seo.js
    ├── gatsby-plugin-theme-ui
    │   └── components.js
    └── gatsby-theme-blog-core
       └── components
          ├── post.js
          └── posts.js

要添加自定义 bio-content.js 组件，您需要在 /src/gatsby-theme-blog/components/bio.js 下添加一个名为 bio-content.js 的文件，其余自定义组件依此类推。

无法覆盖从 gatsby-starter-rocket-docs 创建的文档站点上的样式（着色和 svg 图像）

Cannot override styling (coloration and svg image) on docs site created from gatsby-starter-rocket-docs

node.js

reactjs

gatsby

gatsby-plugin

gatsby-theme