4. 디자인시스템 - Storybook 및 Rollup scss 설정

 

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 "@storybook/react-webpack5";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    ...
    {
      name: "@storybook/addon-styling-webpack",
      options: {
        // sass: { implementation: require('sass')  }
        rules: [
          {
            test: /\.s[ac]ss$/,
            sideEffects: true,
            use: [
              require.resolve("style-loader"),
              {
                loader: require.resolve("css-loader"),
                options: {
                  importLoaders: 2,
                },
              },
              require.resolve("resolve-url-loader"),
              {
                loader: require.resolve("sass-loader"),
                options: {
                  // Want to add more Sass options? Read more here https://webpack.js.org/loaders/sass-loader/#options
                  implementation: require.resolve("sass"),
                  sourceMap: true,
                  sassOptions: {},
                },
              },
            ],
          },
        ],
      }
    }
  ],
  ...
};
export default config;

 

1.4. preview.js 설정 (참고)

공통 scss 파일인 index.scss을 import 해주고 기존에 import 되던 css 들은 모두 주석처리 및 제거한다.

# .storybook/preview.ts

import type { Preview } from "@storybook/react";

// 공통 SCSS 파일 import
import '../src/assets/styles/index.scss';

const preview: Preview = {
  ...
};

export default preview;

 

1.5. scss 공통 파일 (참고1, 참고2)

# assets/styles/index.scss

// _ 부분이라고 불리는 것은 scss에게 CSS 파일로 컴파일하지 말라고 지시합니다.
@import "variables";

// 구성 요소의 CSS를 소개합니다.
@import "../../components/Button/style";

 

1.6. Sass 적용 확인

global.scss 에서 적용된 css가 정상적으로 적용되었는지 확인

$ yarn storybook

 

2. rollup scss 설정

2.1. rollup.config.mjs 파일 변경

BEFORE

# rollup.config.mjs

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";

// This is required to read package.json file when
// using Native ES modules in Node.js
// https://rollupjs.org/command-line-interface/#importing-package-json
import { createRequire } from 'node:module';
const requireFile = createRequire(import.meta.url);
const packageJson = requireFile('./package.json');


export default [{
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript(),
    postcss({
      extensions: ['.css']
    })
  ]
}, {
  input: 'dist/index.d.ts',
  output: [{ file: 'dist/index.d.ts', format: 'es' }],
  plugins: [dts()],
  external: [/\.css$/]
}];

 

AFTER

# rollup.config.mjs

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import scss from "rollup-plugin-scss";

// This is required to read package.json file when
// using Native ES modules in Node.js
// https://rollupjs.org/command-line-interface/#importing-package-json
import { createRequire } from 'node:module';
const requireFile = createRequire(import.meta.url);
const packageJson = requireFile('./package.json');


export default [{
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript(),
    scss({
      // include: ["src/assets/**/*.scss"],
      // insert: true,

      // outputStyle: "compressed", // css 출력 스타일 (expanded: 압축되지 않은, compressed: 압축된, nested: 중첩된)
      include: ["src/**/*.scss"],
      // output: 'dist/bundle.css', // 번들된 CSS 파일 경로 설정
      fileName: 'assets/bundle.css'
    })
  ]
}
, {
  input: 'dist/index.d.ts',
  output: [{ file: 'dist/index.d.ts', format: 'es' }],
  plugins: [dts()],
  external: [/\.s[ac]ss$/]
}

];

 

2.2. 라이브러리 정리

추가

$ yarn add --dev rollup-plugin-scss

 

삭제

$ yarn remove rollup-plugin-postcss

 

2.3. 확인

build 후 dist 폴더에 index.esm.js에 css 구문이 추가되었는지 OR insert: true 옵션을 주석 처리하고 dist 폴더에 해당 css가 생성되는지 확인해 본다.

$ yarn build

 

2.4. publish

$ yarn build-publish

 

3. 테스트 프로젝트에서 npm 라이브러리 설치 후 확인

https://dchkang83.tistory.com/220

3. 디자인시스템 - npm에서 받아서 활용해보기