React Storybook에서 CDN을 이용해서 부트스트랩 CSS 모듈 가져오기

Sungmin·2020년 1월 19일
0

0) 들어가기 전..

웹팩 설정, npm package 설치 그리고 어떠한 configuration이 전혀 없다! 정말 쉽다.

1) .storybook 디렉토리에 preview-head.html 파일을 생성한다

웹팩 설정 없이 preview-head.html파일을 만들어 준다. preview-head.html 파일은 마치 리액트 프로젝트의 public/index.html에서 부트스트랩을 CDN을 통해(를 통해) 가져올 때 처럼 스토리북 프로젝트에도 CDN을 통해 가져올 때 쓰도록 해주는 파일이다.

2) 부트스트랩 CDN을 복사해서 preview-head.html에 붙여넣는다.

Bootstrap CSS CDN 링크: https://getbootstrap.com/docs/4.4/getting-started/introduction/

위의 스크린샷 처럼 단순히 CDN을 복사+붙여넣기 한다. 스토리북 프로젝트가 실행되어 있는 상태에서 CDN을 적용했다면 CLI에서 ctrl+c를 눌러 종료시킨 후 다시 실행시켜야 Bootstrap의 스타일이 적용된 스토리북 프로젝트를 볼 수 있다.

3) Bootstrap CDN 적용 전 / 적용 후

  • 적용 전 -

  • 적용 후 -

  • 또한 Bootstrap JS의 CDN을 가져와서 적용이 가능하다. 이때는 태그의 가장 아랫부분에 Bootstrap JS의 CDN을 import를 해야할 필요가 있을 것이다. 스토리북 공식 문서에 Add Custom Body 를 참고하면 된다.

  • 부트스트랩 뿐만 아니라 다른 CSS Framework 또한 CDN을 가져와서 스토리북에 적용할 수 있다.

4) 여러분의 시간은 소중합니다...

how to import bootstrap in storybook 으로 구글링 하면서 찾아보니까 대부분 하는 말들이 '웹팩 설정을 다시해야 한다', '어떤 npm package를 설치해야한다' 이었다. 설정하느라고 고생은 다했지만 제대로 된 것은 하나도 없었고 개발자에게 삽질이 중요한 미덕이라고 생각하지만 삽질도 각 개발자마다 우선순위가 있다고 생각한다. 이 글을 보는 분들의 덜 삽질을 위해 이 글을 쓴다.

profile
Share everything that I like

0개의 댓글