[LAB-4] storybook - css 오류

[ssw6750]

질문 작성자

서석원

문제 상황

스토리북에 전역 css를 설정하고 싶은데 에러가 나타납니다.

main.js를 웹펙하고 연결 시켰습니다. css관련해서 이것저것 시도해보긴했는데 변화가 없네요.

1번째 줄 처럼 임포트 하면 문제가 발생합니다.

에러메시지 입니다.

프로젝트 저장소 URL

해당 레포 develop 브랜치 입니다

• 공개된 GitHub 프로젝트 저장소 URL을 여기에 남깁니다.
• main 브랜치가 아닐 경우, 확인해야 할 브랜치 이름도 함께 작성합니다.
• 트러블 슈팅을 위해 node_modules 폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요.

환경 정보

• 운영체제 정보 (예: Windows, macOS)
• Node.js 정보 (예: v16.14.0)
• 라이브러리 정보 (예: React v18.0.2)

[yamoo9]

문제 원인

Webpack v5 앱 구성과 Storybook v7(Beta) 구성 간 호환 문제로 글로벌 스타일 설정에 문제가 된 것으로 보입니다.

참고로 Storybook은 v7부터 Vite 앱 구성과 호환성이 좋다고 말합니다. Webpack과의 호환성에 대해 별도 코멘트가 없었습니다.

문제 해결

Storybook 구성 설정을 조금 손 보면 Webpack v5의 구성을 사용하지 않고도, 글로벌 스타일 설정이 가능합니다.

.storybook/main.js

main.js 코드에 정적 서빙(serving) 디렉토리로 src 디렉토리 위치를 설정합니다.

const config = {
  // ...
  staticDirs: ['../src'],
};

.storybook/preview-head.html

preview-head.html 파일을 추가한 후, 절대 경로 위치 설정 방법으로 main.css 파일을 호출합니다.

<link rel="stylesheet" href="/styles/main.css" />

가이드 파일

첨부된 가이드 파일 압축을 풀고, .storybook 폴더와 main.css 파일을 참고하세요.

karly-react-project-develop-confirm-by-yamoo9.zip

참고

Serving static files via Storybook Configuration

[ssw6750]

아하..! 호환 문제로 보이는군요... 어쩐지 아무리 찾아도 안나오더라고요,,ㅠㅠ 해결책을 찾아주셔서 감사합니다,,!!