scss
-
6. 디자인시스템 - 샘플 Component 제작Project/Figma+Storybook 2023. 11. 20. 16:53
이제 본격적으로 컴포넌트를 제작해 보자! Figma에 생성된 Component를 Storybook으로 옮기는 과정을 정리해 둔다. 좀더 좋을 방법이 있다면 계속 개선해 나갈 예정이다. 1. 공통 scss 작성 _variables.scss : css 변수 모음 ... $color-global-mint90: #003B40 !default; $color-global-mint80: #004C53 !default; $color-global-mint70: #006D78 !default; ... 2. Figma -> Storybook Compoent 작성 2.1. Figma Code -> Anima Figma to Code 플러그인 중에서 필자가 구성한 Storybook에서는 Anima가 제일 유사하여 선택하고 진행..
-
4. 디자인시스템 - Storybook 및 Rollup scss 설정Project/Figma+Storybook 2023. 11. 15. 16:48
1. storybook에 scss 설정 Storybook은 Sass를 기본적으로 지원하지 않는고 실행 하거나 스크립트를 작성할 때 webpack을 사용하여 모든 코드를 묶는다. sass를 추가하려면 몇 가지 패키지를 추가하고 webpack 구성을 확장해야한다. 1.1. Sass 지원 추가를 위한 개발 종속성 추가 (참고) $ yarn add --dev css-loader style-loader resolve-url-loader sass sass-loader 1.2. addon-styling-webpack 추가 (참고) $ yarn add --dev @storybook/addon-styling-webpack 1.3. main.ts 설정 import type { StorybookConfig } from "@..