Storybook & SASS 설정

Nextjs Storybook설정 & SCSS 적용 방법

---

보통 프로젝트에서 개발자들이 각자 컴포넌트를 만들면 이를 다른 개발자들에게 공유를 하거나 작동방식에 대한 예시가 필요합니다.

이는 ExamplePage이나 샘플 페이지를 만들어서 작동하는걸 보여줄 수 있지만 스토리북을 이용해 보여주는 방식이 더 좋습니다.

 

이 페이지에서 스토리북을 어떻게 만들고 설정을 적용하는지 설명드리겠습니다.

 

링크: https://github.com/biglol10/tistory_source/tree/main/nextStorybook

 

우선 해당 페이지에서 필요한 패키지들은 아래와 같습니다

sass, sb, style-loader, css-loader, sass-loader

 

우선 npm install --save-dev sb 후 npx sb init --builder webpack5 를 해줍니다. 다른 자료에서 webpack5를 이용하지 않고 init하는 방법에 대해 다루는 자료들이 있지만 세부적인 설정을 할 때 이상한 에러들이 많이 발생했던 걸로 기억합니다.

 

이후 npm run storybook을 하면 아래와 같은 화면이 나옵니다.

Storybook에서 절대경로를 설정하기 위해선 .storybook폴더의 main.js파일에 해당 소스를 적으면 됩니다.

const path = require('path');

module.exports = {
	stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
	addons: [
		'@storybook/addon-links',
		'@storybook/addon-essentials',
		'@storybook/addon-interactions',
	],
	framework: '@storybook/react',
	core: {
		builder: '@storybook/builder-webpack5',
	},
	webpackFinal: async (config) => {
		config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
		config.resolve.alias = {
			...config.resolve.alias,
			'@components': path.resolve(__dirname, '../components'),
			'@utils': path.resolve(__dirname, '../utils'),
			'@styles': path.resolve(__dirname, '../styles'),
		};
		return config;
	},
};

next.config.js에서 설정했던 것처럼 여기에선 webpackFinal에 작성하면 됩니다.

 

---

SASS 적용

---

Next에서 SASS를 적용하기 위해 별다른 작업을 할 필요 없습니다. 단순히 npm i sass를 해주면 사용할 수 있습니다.

이는 next를 설치할 때 내부적으로 웹팩에서 SASS파일을 어떤 로더로 다룰지 다 정의되어 있기 때문입니다.

 

// Index 파일

import Style from "@styles/Tab.module.scss"; // SCSS파일

... 중략 ...

<div className={Style["sampleDiv"]}>sample</div>

이렇게 하면

개발자 도구에서 class명을 보면 Index(파일명)이 적여있는 걸 보실 수 있습니다. 이 또한 웹팩에서 설정되어 표시되는 겁니다.

 

Storybook에서 sass를 이용하고자 하면 1차적으로 웹팩에서 sass-loader, css-loader, style-loader 이 3개의 로더가 필요합니다.

config.module.rules.push({
  test: /\.s(a|c)ss$/,
  include: path.resolve(__dirname, "../"),
  use: ["style-loader", "css-loader", "sass-loader"],
});

단 이렇게 하면 문제점이 오른쪽에 보시는 것처럼 단순 UID가 나옵니다.

class명이 여러개 일 경우 어떤 파일에서 {파일명}_UID 형식으로 표시되면 소스를 파악하는데 도움이 되지만 여기에선 그렇지 않고 직접 클릭을 하면서 확인을 해야 하기 때문에 확인이 힘듭니다.

 

 

이때 웹팩에서 로더를 수정해주시면 됩니다.

 

config.module.rules.push({
  test: /\.s(a|c)ss$/,
  include: path.resolve(__dirname, "../"),
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        modules: {
          auto: true,
          localIdentName: "[name]__[local]--[hash:base64:5]", // index_testButton__z9CpQ 처럼 [path]_[uniqueId]로 표시하고 싶은데 @storybook/preset-scss 쓰면 [uniqueId]만 표시됨 (예시: SKwgNtUsLB_olGMb4p9w )
        },
      },
    },
    "sass-loader",
  ],
});

 

결과: