类型错误：this.getOptions 不是样式加载器的函数

Question

问题

在使用 Storybook 时，我正在运行npm run storybook并收到以下错误。

ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

背景/上下文

我的目标是让 Storybook 能够使用sass.

设置很简单：我有scss由组件文件导入的文件。

在寻找实现此目的的方法时，我遇到了一个可以这样做的插件，请参阅此. 本质上，您可以运行npm i --save-dev @storybook/preset-scss style-loader css-loader sass-loader.

这样做时，我遇到了第一个错误。这是同样的错误，但对于sass-loader. 这个Stack Overflow 线程帮助我修复了这个错误。

所以，我想总而言之，我已经尝试过：

• 跟随文档（上面链接）
• 跟随堆栈溢出线程（上面链接）

相关的开发依赖

"@storybook/preset-scss": "^1.0.3",
"css-loader": "^6.2.0",
"sass-loader": "^10.1.1",
"style-loader": "^3.2.1"

提前致谢！

Answer 1

我在storybook中设置sass时也遇到了这个问题。自述文件提供的纱线脚本将安装这些库的最新版本，这些库不再与故事书运行的 webpack 4 兼容。

对于遇到故事书问题的其他人，您可以运行以下命令。

yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0

Answer 2

解决方案

退后一步后，我意识到我可以尝试解决sass-loader问题的方法：降级主要版本。

脚步

• 将style-loader1 个主要版本降级为2.0.0：npm i style-loader@2.0.0
• 然后，幸运的是，我遇到了同样的问题 css-loader
• 将css-loader1 个主要版本降级为5.2.7：npm i css-loader@5.2.7

概括

通过将所有加载器降级一个主要版本，我能够让它工作。