[Bug]: Can't load SCSS Modules

[angelod1as]

Describe the bug

I'm working on a NextJS 12 project and just can't use Storybook with it. I just installed it, and everything worked perfectly until I do a story in which a component has a SCSS Module, especially when it uses a variable or mixin set up in a different file.

The problem is that the project is pretty big, and its configuration is poorly documented. The person that did it is not working with us anymore, so most of the team does not understand some decisions.

I documented the changes and errors in the next section and am happy to respond to any doubts.

In summary

• I install Storybook
• I create a story with a component that uses SCSS Modules with variables set on another file
• I run yarn storybook
• The build crashes.

I tried a lot of solutions and read a good amount of information on how to import the SCSS files and make them work, and none of that solved it.

To Reproduce

To reproduce, I created a barebones repo of my project — no contextual info, just the installed packages and configs. You can find the initial repo here. I separated my attempts into different commits to make it easier to understand:

1. This is the initial commit with the barebones project and default Storybook install.
2. The second commit is a working version with a test story.
3. The third commit is a creation of a story that uses SCSS modules and variables. It errors (see pastebin)
4. in the fourth commit I add the styles to the preview file, as said in the docs. It errors (see pastebin).
5. After some good internet digging, I found some possible solutions — spoilers: it errors — and added it to the fifth commit. Well... it errors (see pastebin).
6. Here I stopped trying workarounds and came here ask for help.

System

Environment Info:

  System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/Documents/GIT/storybook-repro/node_modules/.bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.5.1
  npmPackages:
    @storybook/addon-essentials: ^7.0.24 => 7.0.24
    @storybook/addon-interactions: ^7.0.24 => 7.0.24
    @storybook/addon-links: ^7.0.24 => 7.0.24
    @storybook/blocks: ^7.0.24 => 7.0.24
    @storybook/nextjs: ^7.0.24 => 7.0.24
    @storybook/preset-scss: ^1.0.3 => 1.0.3
    @storybook/react: ^7.0.24 => 7.0.24
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

You can see the package.json in the repo above. Of course, many installed packages are not used in this repo, but they are used in the actual project — which I cannot share.

Things I read: the docs #12464 #6364 #13034 this this this this

EDIT - 11/07/23

I read a lot and understood the issue (partially).

Apparently, the @storybook/nextjs is not loading properly my sassOptions in next.config.js.

After more reading, I updated the repro package and removed @storybook/preset-scss.

To make everything work, I have to manually add my @imports to every .scss file — because sassOptions is not being read and is not pretending automatically.

See the repro for details and code.

[angelod1as]

Edited the issue with new findings.