描述bug
我正在使用NextJS 12项目，但是无法在其中使用Storybook。我刚刚安装了它，一切都运行得非常完美，直到我在一个故事中使用了使用另一个文件中设置的变量或mixin的SCSS模块的组件。
问题是这个项目相当大，而且它的配置文档很差。做这个项目的人已经不再和我们一起工作了，所以团队中的大多数人都不明白一些决策。我已经记录了更改和错误，并很高兴回答任何疑问。

总结

• 我安装了Storybook
• 我创建了一个使用SCSS模块和在另一个文件中设置的变量的故事
• 我运行yarn storybook
• 构建崩溃了。

我尝试了很多解决方案，并阅读了大量的关于如何导入SCSS文件并使它们正常工作的资料，但没有一个解决了问题。

重现

要重现这个问题，我创建了一个我的项目的裸仓库——没有上下文信息，只有已安装的包和配置。你可以在这里找到 initial repo here 。我将我的尝试分成了不同的提交，以便更容易理解：

1. This is the initial commit 是带有默认Storybook安装的裸仓库。
2. The second commit 是一个工作版本，其中包含一个测试故事。
3. The third commit 是我创建的一个使用SCSS模块和变量的故事。它出错( see pastebin )
4. 在 the fourth commit 中，我将样式添加到了 preview 文件中，如文档所述。它出错( see pastebin )。
5. 经过一些很好的互联网挖掘后，我找到了一些可能的解决方案——剧透：它出错——并将其添加到了 fifth commit 。嗯......它出错( see pastebin )。
6. 在这里，我停止了尝试解决方法，并来到这里寻求帮助。

系统

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

其他上下文

你可以看到上面的 package.json 。当然，许多已安装的包在这个仓库中没有被使用，但它们在实际项目中被使用——这是我不能分享的。
我读到的东西： the docs#12464#6364#13034thisthisthisthis

编辑- 11/07/23

我阅读了很多，并部分理解了这个问题。
显然， @storybook/nextjs 没有正确加载我的 sassOptions 在 next.config.js 中。
经过更多的阅读，我更新了重现包并删除了 @storybook/preset-scss 。
为了让一切正常工作，我必须手动将我的 @imports 添加到每个 .scss 文件中——因为 sassOptions 没有被读取，也没有自动假装。
查看 repro 以获取详细信息和代码。