Next.js のStorybookでSassを利用する(webpack5対応)

Storybook + Next.js

Next.js で Storybookを利用しようとした際にsass-loaderがエラーを出したのでまとめてみました。

まずは以下のコマンドでNext.jsをインストールして

npx create-next-app

次に以下のコマンドでStorybookをインストールします。

npx sb init

これで以下のコマンドでStorybookが起動できるようになります。

yarn storybook

ひとまずNext.jsのReactコンポーネントが表示できるか確認するため、stories/Home.stories.jsxに以下のファイルを作成してStorybookに表示できるか確認します。

import React from 'react';
  
import  Home  from '../pages/index';
  
export default {
  title: 'Example/Home',
  component: Home,
};
  
export const Template = () => <Home />;

これで表示は確認できるはずです。

Next.jsにSassにインストール

以下のコマンドでSassをインストール

yarn add sass -D

styles/globals.cssをstyles/globals.scss というファイル名に変更して、Sassの動作確認ができるように以下の内容を変更しておきます。

$color: red;
 
body {
  background: $color;
}

pages/_app.jsのCSS読み込みも以下のように変更しておきます。

import '../styles/globals.css'
↓
import '../styles/globals.scss'

これで以下のコマンドでNextアプリケーションを起動すると背景が赤に変わってSassがちゃんと動作しているのが確認できます。

yarn dev

StorybookでSassを利用

.storybook/preview.jsの冒頭に以下を追加してSassを利用するとエラーになってしまいます。

import '../styles/globals.scss'

以下がエラー内容。

ERROR in ./styles/globals.scss 3:5
Module parse failed: Unexpected token (3:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

webpackのloaderを追加しろとのことなので以下のコマンドで追加します。

yarn add sass-loader -D

.storybook/main.jsにwebpackFinalを追加します。

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
    });
    return config;
  }
}

これでStorybookを起動しようとすると別のエラーが表示されるようになります。

ERROR in ./styles/globals.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/globals.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

実はsass-loaderの11以上がwebpack5にしか対応しておらずStorybookで利用されるのがwebpack4なのでこのようなエラーになってしまいます。

そのため、以下のコマンドでversion 10.1.1のsass-loaderがインストールするとエラーが出ずにStorybookでSassを利用できるようになります。

yarn add sass-loader@10.1.1 -D

Storybookでwebpack5を利用

上記の10.1.1のsass-loaderを利用するでもよいのですが今回はMigrationを参考にStorybookでwebpack5を利用できるように変更して最新のsass-loaderが利用できるように変更します。

まずは以下のコマンドで必要なパッケージをインストールします。

yarn add webpack @storybook/builder-webpack5 @storybook/manager-webpack5 -D

.storybook/main.jsにcoreを追加します。

module.exports = {
  core: {
    builder: "webpack5",
  },
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
    });
    return config;
  }
}

これでStorybookで最新のsass-loaderが利用できるようになります。

スポンサードリンク

«AWS CloudFrontで特定ディレクトリを別のS3ストレージを割り当てる | メイン | Github Actionsのキャッシュ機能を利用してNext.jsのデプロイを高速化»