Replace addon-styling-webpack with webpack for scss and sass

[grybykm]

First of all, thanks a lot for building @storybook/addon-styling and @storybook/addon-styling-webpack! The first one worked well for me for a long time. Since it was deprecated, the new one gave me helpful insights on how to use scss in the storybook without extra addons. I hope that in the future such workarounds won't be required.

Summary

The addon doesn't work for me given the instructions provided in README. For anyone faced the same issue I'd like to suggest an alternative approach.

Solution

Use webpack directly instead. Add the snippet below to the root of your config in main.js or main.ts:

webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.s[ac]ss$/i,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2,
          },
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
            sassOptions: {
              implementation: 'sass',
            },
          },
        },
      ],
    });
    return config;
  },

You might also want to run npm i -D sass sass-loader css-loader style-loader.

Make sure to completely delete @storybook/addon-styling and @storybook/addon-styling-webpack from addons and the package.json file!

[grybykm]

Raised an issue as doc. Closing.