storybook config (feat. yarn2)

[SoYoung210]

postcss 8이 릴리즈되면서 디펜던시가 여기저기 종종..깨짐.. 특히 웹팩4 모드로 돌리면 최신 디펜던시와 거진 호환이 안되는데..

• @storybook/addon-postcss로 postcss버전을 패키지 버전으로 써주고
• storybook/scss를 사용해주고
• (if yarn2) 의존성을 좀 명시해주면 된다.

# yarn2
packageExtensions:
  "@storybook/builder-webpack4@*":
    dependencies:
      "sass-loader": "^10.1.1"
      "node-sass": "^5.0.0"

const { resolve } = require('path');

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-essentials',
    {
      name: '@storybook/preset-scss',
      sassLoaderOptions: {
        includePaths: 'your_path'
      }
    },
    {
      name: '@storybook/addon-postcss',
      options: {
        rule: {
          test: /\.scss$/,
          sideEffects: true,
        },
        postcssLoaderOptions: {
          implementation: require('postcss'),
          config: 'your_path'
        },
      },
    },
  ],
  webpackFinal: async baseConfig => {
    const { module = {} } = baseConfig;

    const rules = (baseConfig.module.rules || []).filter(f => {
      if (f.test != null) {
        return f.test.toString() !== '/\\.scss$/' && f.test.toString() !== '/\\.(ts|tsx)$/';
      }
      return true
    });

    return {
      ...baseConfig,
      module: {
        ...module,
        rules: [
          ...rules,
          {
            test: /\.(ts|tsx)$/,
            loader: require.resolve('babel-loader'),
            options: {
              configFile: 'your_path'
            },
          },
        ]
      }
    };
  },
};