My workflow involves NextJs, Tailwind ,SCSS + scss modules and I cannot for the life of me get the modules to work with storybook.....

[PaulHaze]

So I have just started toying with Storybook and I don't know if its just the way I work but my god it has been a struggle. It seems for every issue I google there are answers that date from 12-18 months ago involving webpack rules and config changes that don't seem to be relevant to the current version of Storybook. It was a struggle to even get the thing to load up for the first time!

So now I have it working of a sorts with tailwind/nextjs and sass and it plays nicely until I try and import a *.module.scss, or try and use the @apply word within a *.module.css/scss file.

I can apply and view styles using className="p-4 mt-10" no problem, I can apply styles using classes and the @apply keyword in a main.scss file a lá:

  .bb {
    @apply border border-red-600 sm:border-blue-600 md:border-green-600 lg:border-black;
  }

but nothing I have tried so far can get scss modules or @apply working in modules. Has anyone found a solution? My workflow makes quite a bit of use of scss modules so without a working solution then Storybook is not worth the extra overhead at this stage for me...

FWIW these are my addons

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: 'storybook-addon-sass-postcss',
      options: {
        loadSassAfterPostCSS: true,
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
        rule: {
          test: /\.(scss|sass)$/i,
        },
      },
    },
  ],

and I tried adding this to my webpack config:

    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

as it popped in a few solutions but when I did I got a "SassError: expected "{". from the sass-loader....

Anyone have any tips or pointers for me?

[PaulHaze]

So if anyone comes across this same problem I found that THIS addon works out the box with pretty much zero config:

https://storybook.js.org/addons/storybook-addon-next
https://github.com/RyanClementsHax/storybook-addon-next

[zerinoid]

You've just saved my soul