Type Error: this.getOptions is not a function For style-loader

Question

问题

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

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

Background/Context

我的目标是让 Storybook 能够与 sass 一起工作。

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

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

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

所以，总而言之，我想我试过了：

跟随文档（上面链接）
跟随 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

解决方案

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

步骤

已将 style-loader 1 个主要版本降级为 2.0.0：npm i style-loader@2.0.0
然后，幸运的是，我运行遇到了与 css-loader
已将 css-loader 1 个主要版本降级为 5.2.7：npm i css-loader@5.2.7

总结

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

Answer 2

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

对于其他运行遇到故事书问题的人，这就是您可以运行的方法。

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

Answer 3

降级后，在我的例子中，我解决了它只是评论装载机 scss 和 sass:

{
                test: /\.css$/,
                use:
                    [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                modules: true
                            }
                        }
                        // ,
                        // {
                        //     loader: 'sass-loader'
                        // }
                        // ,
                        // {
                        //     loader: 'scss-loader'
                        // }
                    ]
            }

声明模块“*.module.css”；没有影响结果。

记住：始终运行

npm start

测试这些配置更改以查看是否有问题**。这样做可以节省我今天下午的时间。

Type Error: this.getOptions is not a function For style-loader

Type Error: this.getOptions is not a function For style-loader

reactjs

webpack

storybook

webpack-style-loader