Storybook で SCSS を使えるようにする

注意

• フロントエンドは移り変わりが激しいため、この方法が誤りになる可能性があります
• 2021/09/06 時点での情報です

結論

1. sass-loader の v10 を入れる

最新版を入れてしまわないように注意する*1。

$ yarn add --dev sass-loader@^10.0.0

2. style-loader と css-loder を入れる

$ yarn add --dev style-loader css-loader

3. .storybook/main.js を修正する

以下のように修正します。

module.exports = {
  // （ここまで省略）
  webpackFinal: async(config, {configType}) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    });

    return config;
  }
  // （ここ以下省略）
}

*1:webpack に対応させるため、v10 にする