[Gatsby] shadowing 상대경로 주의사항

개츠비는 shadowing을 지원하는데 보통 테마 일부분을 수정하거나 할때 활용됩니다

shadowing 하는 방법은 솔직히 좀 무식합니다.. node_modules 안에서 shadowing 할 모듈 찾아서 경로까지 보존해서 src 밑에 파일 그대로 복사 붙여넣기하고 일부만 수정하는겁니다.

무식하지만 달리 좋은 방법이 없으니 테마 일부분만 수정할땐 그냥 shadowing을 하고 있습니다.

shadowing할 때 주의할 점이 상대경로를 모두 절대경로로 바꿔줘야 한다는 점입니다.

 

import * as React from "react"
import { useColorMode } from "theme-ui"
import Highlight, { defaultProps } from "prism-react-renderer"
import { calculateLinesToHighlight, getLanguage, GetLanguageInput } from "@lekoarts/themes-utils"
import lightTheme from "prism-react-renderer/themes/github"
import darkTheme from "prism-react-renderer/themes/vsDark"

// 여기가 문제
import Copy from "./copy"
import useMinimalBlogConfig from "../hooks/use-minimal-blog-config"

예를 들어 gatsby 테마 내부 파일 하나를 복사해왔는데, gatsby develop을 하니 자꾸 모듈이 없다고 나옵니다

 

import Copy from "@lekoarts/gatsby-theme-minimal-blog/src/components/copy"
import useMinimalBlogConfig from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-minimal-blog-config"

이때는 상대경로로 import 된 부분을 전부 절대경로로 바꿔주면 됩니다

 

gatsby-theme-minimal-blog 테마 코드블럭에 java, kotlin이 적용이 안되길래 이것저것 수정하면서 삽질을 엄청 했네요 ~.~

혹시라도 똑같은 작업 하려고 하시는 분들은 https://github.com/joe-brothers/blog/compare/ea1fbad0d0b59d807d9e1116163f9f2ad98703b0...955126809b526a87ae4a00475d99df524450bba6 이 diff 참고하시면 됩니다