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:

[winkerVSbecks]

@cbrown11 this is the repository for Storybook docs. It's not a support channel. Please join our Discord for support https://discord.gg/storybook and refer to the How to get help channel

[cbrown11]

I just clicked on "Report an Issue" on the page https://storybook.js.org/recipes/bootstrap

[winkerVSbecks]

🤦🏽‍♂️ so sorry, I totally missed the top bit about it being related to a recipe. I'll reopen and assign it.

[ShaunEvening]

Hey @cbrown11, this seems to be a problem with how the angular sets up the styleUrls for components. You can follow along with this issue: storybookjs/addon-styling#41