gatsby v2에서 material-ui v3에서 gatsby build (production)하면 develop에서 깨끗하게 표시 된 CSS가 무너집니다.

문제


gatsby develop 에서 문제 없었던 표시가 gatsby build gatsby serve 를 거쳐 실제로 표시하면 css가 총 무너진다.



통상 [24x24] 사이즈로 표시되는 아이콘이, 부모 요소 폭 가득한 사이즈가 된다.
import { Star as StarIcon } from '@material-ui/icons'
...
...
return <StarIcon />



CSS가 무너지지 않는 패턴



http://localhost:9000/http://localhost:9000/sub-directory/page
루트에서 하위 디렉터리를 볼 때 문제 없음

css가 무너지는 패턴(현재 발견하고 있는 패턴)



http://localhost:9000/sub-directory/page
직접 하위 디렉토리를 표시하면 CSS가 무너집니다.

해결 방법



  • 여기에서 볼 수 있듯이 샘플을 따라이 파일을 수정합니다.

  • 이 플러그인을 추가하고 <MuiThemeProvider>를 Layout 등에서 지 웁니다
  • 좋은 웹페이지 즐겨찾기