Presets are grouped collections of babel, webpack, and addons configurations that support specific use cases.
For example, to use SCSS styling rather than manually configuring Storybook's webpack config, you can use the @storybook/preset-scss package, which does the heavy lifting for you.
Existing presets
Storybook-maintained presets are available in the presets repo.
Basic usage
Each preset has its own installation instructions, but the idea of presets is to install an addon and then load its preset.
For example, to use SCSS styling, first install the addon and the required dependencies:
Then load it in the file main.js in your storybook folder (.storybook by default):
That's it. When Storybook starts up, it will configure itself to use SCSS styling without any further configuration. For more information, see the SCSS preset README.
Preset configuration
Presets can also take optional parameters. These can be used by the preset itself or passed through to configure the webpack loaders that are used by the preset.
Consider this example:
This configures the CSS loader to use modules and how the styling will be defined.
Each preset has its own option and those options should be documented in the preset's README.
Go deeper
To understand more about how presets work and write your own, see writing presets.
