순풍으로 제작 준비가 된 스토리북 만들기

안녕하세요 여러분, 저는 최근 프로젝트에 tailwind, nextjs 및 storybook을 사용하려고 많은 고통을 겪었습니다. 최종적으로 프로덕션 환경에서 작동하도록 하는 데 많은 작업(및 시간)이 필요했기 때문에 몇 가지 팁을 공유해야겠다고 생각했습니다.

tailwind를 사용해 본 적이 있다면 트리 쉐이킹과 같은 것을 허용하는 postcss를 사용한다는 것을 알고 있을 것입니다. 지금은 뒷바람 로드를 사용했지만 일반적으로 설치 문서를 따랐고 그대로 두었습니다. 어쨌든 제가 어떻게 했는지 보여드리겠습니다.

먼저 yarn create next-app 를 실행하여 nextjs 프로젝트를 부트스트랩했습니다. 그런 다음 yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest를 실행하여 tailwind를 설치했습니다. nextjs에 이미 postcss가 있다는 것을 알고 있지만 최신 상태인지 확인하기 위해 어쨌든 설치합니다. 나는 이 프로젝트에 pages 디렉토리를 사용하지 않았으므로 거기에 있는 모든 파일을 정리할 수 있습니다. 이제 tailwind가 포함된 nextjs 앱이 있습니다.

tailwind 구성을 추가하기에 좋은 순간이므로 npx tailwindcss init -p를 실행하여 tailwind.config.js 및 postcss.config.js 를 생성합니다. 이제 npx sb init를 실행하여 동화책을 만들어 보겠습니다. 이제 yarn add @storybook/addon-postcss를 실행하고 추가하십시오.

// .storybook/main.js
{
  name: '@storybook/addon-postcss',
  options: {
    postcssLoaderOptions: {
      implementation: require('postcss'),
    },
  },
},

.storybook/main.js 파일에. .storybook/main.js는 이제 다음과 같아야 합니다.

// .storybook/main.js
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
       },
     },
   },
  ]
}

이제 stories/assets로 이동하여 다음을 사용하여 globals.css 파일을 만듭니다.

/* stories/assets/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind 규칙 위에 사용자 정의 스타일을 추가합니다. dvelopment에서 css를 가져오려면 import '../stories/assets/globals.css' 파일에 .storybook/preview.js를 추가하십시오. 이제 프로덕션에서 treeshaken css를 가져오려면 .storybook/preview-head.html라는 파일을 만들고 다음으로 채웁니다.

<!-- .storybook/preview-head.html !-->
<link rel="stylesheet" href="./app.css" />

이제 postcss-cli를 실행하여 yarn add postcss-cli를 설치합니다. 이제 scripts 파일의 package.json 섹션을 다음과 같이 바꿉니다.

"scripts": {
    "dev": "next dev",
    "build": "yarn build-css && yarn build-storybook",
    "start": "next start",
    "storybook": "start-storybook -s ./stories/assets -p 6006",
    "build-css": "postcss ./stories/assets/globals.css -o ./stories/assets/app.css",
    "build-storybook": "build-storybook -s ./stories/assets"
  },

축하합니다! 이제 tailwindcss 스토리북이 생겼습니다. 이제 Chromatic 또는 정적 호스팅 회사를 사용하여 앱을 배포할 수 있습니다. Vercel 을 사용하면 배포하는 방법을 알려드리겠습니다.

리포지토리를 가져온 다음 다음과 같이 명령을 설정했는지 확인합니다.

이제 실제로 끝났습니다 :). 읽어주셔서 감사합니다. dev.to의 첫 번째 기사였습니다! github에서 저를 팔로우하고 댓글로 어떻게 생각하는지 알려주세요!