Monorepo架构Vue应用中Storybook使用SCSS报lang="scss"模块构建错误

this.getOptions is not a function 报错是版本不兼容导致的：你使用的Storybook 6.3.x默认基于Webpack 4运行，而你安装的style-loader@3.x、css-loader@6.x、sass-loader@12.x均仅支持Webpack 5，接口不匹配就会触发该错误。
另外你同时配置了@storybook/preset-scss和手动添加SCSS编译规则，重复配置也会导致编译逻辑冲突，和Monorepo多package.json结构无关。

具体解决步骤如下：

• 第一步：卸载当前版本的样式相关loader

yarn remove style-loader css-loader sass-loader -D

• 第二步：安装适配Webpack 4的loader版本

yarn add style-loader@2.x css-loader@5.x sass-loader@10.x -D

• 第三步：修改.storybook/main.js，删除webpackFinal中手动添加的SCSS规则即可，@storybook/preset-scss已经内置了SCSS编译处理，修改后配置参考：

const path = require('path');

module.exports = {
  "stories": [
    "../client/src/stories/**/*.stories.mdx",
    "../client/src/stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss"
  ],
  webpackFinal: async (config, { configType }) => {
    // 其他自定义webpack配置保留即可，无需额外添加scss处理规则
    return config;
  },
}

内容的提问来源于stack exchange，提问作者Stephen Wood