Presets are grouped collections of
addons configurations that support specific use cases.
Storybook-maintained presets are available in the presets repo.
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.
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.
To understand more about how presets work and write your own, see writing presets.