nextjs 11이상에서 storybook 그리고 sass,scss 적용하기

https://storybook.js.org/blog/get-started-with-storybook-and-next-js/

Get started with Storybook and Next.js

 

nextjs 11부터는 webpack5 가 기본 탑재됩니다

 

그렇기 때문에 storybook도 webpack5로 똑같이 맞춰주는것이 필요합니다

 

npx sb init --builder webpack5

 

builder 옵션을 통해 webpack5로 설정하여 스토리북을 설치해주세요

 

npm run storybook

 

그리고 시작하면 정상적으로 스토리북을 활용하실수 있습니다

 

 

sass를 사용하고 있다면 이런 오류를 만나실수 있습니다

 

ModuleParseError: Module parse failed: Unexpected character '@' (1:0)

 

sass를 제대로 읽지 못하고 있군요

 

sass를 추가적으로 사용하고자 하는 경우에는 스토리북의 webpack설정에서도 sass 설정이 필요합니다

 

# With npm
npm install @storybook/preset-scss css-loader sass sass-loader style-loader --save-dev

# With yarn
yarn add --dev @storybook/preset-scss css-loader sass sass-loader style-loader

@storybook/preset-scss, css-loader, sass-loader, style-loader 

 

총 4개의 패키지가 필요한데요

 

css-loader, sass-loader, style-loader는 webpack에서 필요한 loader이고

 

@storybook/preset-scss는 스토리북에서 활용하기 위한 scss webpack 설정이 담겨있는 애드온입니다

 

// .storybook/main.js

module.exports = {
  addons: [
    ...
    '@storybook/preset-scss'
  ],
};

 

이 애드온을 .storybook/main.js 파일의 addons 부분에 추가로 넣어주시면

 

모든 sass 설정을 마치게 됩니다