Repository: storybook
Issue: [Bug]: Can't load SCSS Modules
Labels: bug,needs triage

### 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](https://github.com/angelod1as/storybook-repro). I separated my attempts into different commits to make it easier to understand:

1. [This is the initial commit](https://github.com/angelod1as/storybook-repro/commit/9b68d8243f5dda01aa0fdecc7013b987e8b9fa4b) with the barebones project and default Storybook install.
2. [The second commit](https://github.com/angelod1as/storybook-repro/commit/dd3db4bd773381300ec93210bc098fb2e7391efd) is a working version with a test story.
3. [The third commit](https://github.com/angelod1as/storybook-repro/commit/3c0b7d0990f9f3ef1dfb186390de4538f958646a) is a creation of a story that uses SCSS modules and variables. It errors ([see pastebin](https://pastebin.com/22kHgujC))
4. in [the fourth commit](https://github.com/angelod1as/storybook-repro/commit/13815c27eb31fe5c03ee76cff87c148dc97d59c8) I add the styles to the `preview` file, as said in the docs. It errors ([see pastebin](https://pastebin.com/kKHq7VnS)).
5. After some _good_ internet digging, I found some possible solutions — spoilers: it errors — and added it to the [fifth commit](https://github.com/angelod1as/storybook-repro/commit/808760fa0cbf0d73c2a73e03fb297bdef694018a). Well... it errors ([see pastebin](https://pastebin.com/3YfvEw0h)).
6. Here I stopped trying workarounds and came here ask for help.

### System

```shell
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](https://storybook.js.org/recipes/next) #12464 #6364 #13034 [this](https://stackoverflow.com/questions/62654080/use-global-scss-with-storybook) [this](https://stackoverflow.com/questions/50847065/storybook-global-scss-variables) [this](https://stackoverflow.com/questions/70320431/how-to-use-scss-and-tailwind-css-with-storybook-in-next-js) [this](https://stackoverflow.com/questions/65921319/bug-with-css-loader-style-loader) 

## 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](https://github.com/angelod1as/storybook-repro) for details and code.