Gatsby实现文件Shadow时，如何不本地留存就导入主题内的依赖文件

你遇到的无限复制依赖的问题，本质是Shadow文件里的导入路径写错了，不需要把所有关联组件都搬到本地，正确做法非常简单：

操作步骤 #

• 正常创建你的Shadow目标文件，路径和要求保持一致：src/@lekoarts/gatsby-theme-cara/templates/cara.tsx
• 从主题原生的cara.tsx里把所有代码抄到这个本地文件里，重点修改文件顶部的组件导入路径：
  删掉原来文件里所有的相对路径导入（比如../sections/intro、../utils/style这类带../的路径写法）
  替换成指向npm安装主题包的绝对路径导入，格式为@lekoarts/gatsby-theme-cara/src/对应文件路径
  举个实际的导入写法例子：

  // 错误的相对路径写法，会触发本地递归Shadow
  // import Intro from '../sections/intro'
  // import About from '../sections/about'
  
  // 正确的绝对导入写法，直接读取主题包内的原有文件
  import Intro from '@lekoarts/gatsby-theme-cara/src/sections/intro'
  import About from '@lekoarts/gatsby-theme-cara/src/sections/about'
  import Projects from '@lekoarts/gatsby-theme-cara/src/sections/projects'
  import Contact from '@lekoarts/gatsby-theme-cara/src/sections/contact'
  

• 导入路径改完之后，你就可以在这个本地的cara.tsx里自由调整区块尺寸了：比如给每个区块外层套个限制最大宽度的容器、调整上下边距、修改布局flex的参数，完全不会触发依赖文件的本地复制要求。

关键注意事项 #

• 这种绝对导入是Gatsby对npm安装的本地主题原生支持的解析规则，不需要额外配置webpack别名、不需要在gatsby-node里加路径映射，装完主题就能直接用。
• 后续如果某一个被导入的组件你确实想自定义样式，再单独把那个组件文件放到对应Shadow路径下即可，其余没改动的组件继续走主题包的默认导入，两套机制完全不冲突。
• 之前陷入无限套娃的核心原因：当你用相对路径导入组件时，Gatsby的解析优先级会先检查你本地Shadow路径下的对应文件，找不到就不断要求你补全文件，陷入无限复制的循环；换成指向主题包的绝对导入后，解析路径直接指向node_modules里安装的主题源码，从根源上断掉了递归Shadow的链条。

补充：该方法对LekoArts发布的v3及以上版本的所有主题都通用，不会出现模块找不到的报错。

内容的提问来源于stack exchange，提问作者korbs