I have followed the Integrate Bootstrap and Storybook. Fails on Sass implementation

[cbrown11]

Details

Recipe Page: bootstrap Recipe Template: bootstrap Browser: Angular v14 /v15

What is wrong

Everything work fine when there is css in the component but as soon as I change to sass. I get the error below:

All get the error:

Error: Cannot read properties of undefined (reading 'match')
  at ShadowCss.shimCssText (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-b850d7.iframe.bundle.js:21015:30))
  at /vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-b850d7.iframe.bundle.js:32450:22
  at Array.map (<anonymous>))
  at compileStyles (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-b850d7.iframe.bundle.js:32449:17))
  at compileComponentFromMetadata (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-b850d7.iframe.bundle.js:31975:76))
  at CompilerFacadeImpl.compileComponentFromMeta (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-b850d7.iframe.bundle.js:32691:17))
  at CompilerFacadeImpl.compileComponent (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-b850d7.iframe.bundle.js:32681:17))
  at MyButtonComponent.get (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-b850d7.iframe.bundle.js:58090:37))
  at getComponentDef (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-b850d7.iframe.bundle.js:37167:14))

Screenshots

The new Bootstrap component works fine with css file

Any component(s) that has a scss file, instead of css file has the following error: