Error: Cannot read properties of undefined (reading 'replace')

[alfacool]

hi,, i just installed storybook to my angular project (angular16), and i tried to Integrate the sass using the guide from https://storybook.js.org/recipes/sass/

but i received and Error: Cannot read properties of undefined (reading 'replace') after registering the addons

addons: [
    '@storybook/addon-essentials',
    {
      name: '@storybook/addon-styling',
      options: {
        sass: {
          // Require your Sass preprocessor here
          implementation: require('sass'),
        },
      },
    },
  ],

after reading the documentations i saw the warning

so that means i cant use the addons? how to integrate the sass to SB ? whenever i tried to import the sass into preview.ts it keep telling me additional loader needed

thanks in advance

[ShaunEvening]

Hey @alfacool

Instead of importing your sass into preview.ts add it to the storybook task in your angular.json file like so:

{
  "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "my-default-project:build",
      "styles": ["path/to/styles.sass"]
    }
  }
}

There's more information that you can read on the styling & css docs page for Angular