Storybook加载SCSS报TypeError: this.getOptions is not a function如何解决

你当前遇到的报错本质是webpack版本不兼容导致的：

• 项目安装的css-loader@6+、style-loader@3+、sass-loader@11+ 都是仅适配webpack5的版本，loader中调用的this.getOptions是webpack5才提供的API
• 你使用的@storybook/react@6.0.28 版本默认内置webpack4，运行时调用高版本loader自然找不到API报错
  你之前单独降级sass-loader@10无效，是因为没有同步降级另外两个css相关loader，它们仍然是webpack5适配版本。

解决方案（二选一即可，优先推荐方案一） #

方案一：让Storybook使用webpack5（和项目环境统一，无冲突） #

1. 安装Storybook webpack5构建依赖

npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev

2. 修改.storybook/main.js配置，指定使用webpack5构建器，删除你之前手动添加的scss loader规则（@storybook/preset-scss会自动处理）：

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
  ],
  // 新增配置指定webpack5构建器
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, '../src/client'),
    ];
    return config;
  },
};

3. 重启Storybook即可正常运行。

方案二：降级loader适配Storybook默认的webpack4 #

将三个css相关loader同步降到webpack4兼容的版本即可：

npm install css-loader@5 style-loader@2 sass-loader@10 --save-dev

该方案不需要修改Storybook配置，但是降级后的loader可能和你项目本身的webpack5构建逻辑产生冲突，非必要不推荐。

内容的提问来源于stack exchange，提问作者Andrii Radkevych