Next.js x StorybookでSCSS変数を扱う

Next.jsとStorybookでSCSS変数を使えるようにする方法をまとめます。

環境
ディレクトリ構成
SCSSを使用する準備
- Next.js
- Storybook

環境

Storybook: 6.5.16
Next.js: 13.1.6

ディレクトリ構成

root
  ├── .storybook
  │   ├── main.js
  │   └── preview.js
  ├── assets
  │   └── scss
  │       ├── _foundation.scss　// mixins, variablesの_index.scssを@forward で読み込み
  │       ├── mixins
  │       │   ├── _breakpoint.scss　// mixins指定
  │       │   └── _index.scss　// _breakpoint.scssを@forward で読み込み
  │       └── variables
  │           ├── _colors.scss　// 変数指定
  │           └── _index.scss　// _colors.scssを@forward で読み込み
  ├── next-env.d.ts
  ├── next.config.js
  ├── package.json
  ├── public
  ├── src  
  └── tsconfig.json

SCSSを使用する準備

Next.js

Next.jsでSCSSを使用するためにはsassをインストールします。

yarn add -D sass

そして next.config.js に sassOptions を追加します。

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,

  // ↓ここを追加
  sassOptions: {
    additionalData: `@use "./assets/scss/_foundation.scss" as *;`,
  },
  // ↑ここを追加
}
module.exports = nextConfig

Next.js / Sass Support

これでNext.js内でSCSS変数が使えるようになりました！

Storybook

StorybookでSCSSを扱うためには、style-loader, css-loader, sass-loaderが必要なので、下記コマンドでインストールします。

yarn add -D sass, style-loader, css-loader, sass-loader

各種ローダーをインストール後、.storybook/main.jsにローダーの処理を追加します。

module.exports = {
  // ~ 略 ~

  // ここから追記
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              auto: true,
            },
          },
        },
        {
          loader: 'sass-loader',
          options: {
            additionalData: `@use "./assets/scss/_foundation.scss" as *;`,
          },
        },
      ],
    })

    return config
  },
}