@storybook/preset-scss
Version:
SCSS preset for Storybook
41 lines (32 loc) • 1.13 kB
Markdown
# SCSS preset for Storybook
One-line SCSS configuration for storybook.
## Basic usage
```
yarn add -D @storybook/preset-scss css-loader sass-loader style-loader
```
Then add the following to `.storybook/main.js`:
```js
module.exports = {
addons: ['@storybook/preset-scss'],
};
```
## Advanced usage
You can pass configurations by using Object addon declaration for `@storybook/preset-scss` and adding the configurations under the `option` key. You can pass configurations into the preset's webpack loaders using `styleLoaderOptions`, `cssLoaderOptions`, and `sassLoaderOptions` keys. See documentation for each respective loader to learn about valid options. You can register other addons through the string declaration as normal.
```
module.exports = {
addons: [
{
name: '@storybook/preset-scss',
options: {
cssLoaderOptions: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]',
}
}
},
// You can add other presets/addons by using the string declaration
'@storybook/preset-typescript',
'@storybook/addon-actions',
]
}
```