Narcissistic Pickle Meister
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@storybook/preset-scss

1.0.3 • Public • Published

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:

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',
  ]
}

Keywords

none

Install

npm i @storybook/preset-scss

DownloadsWeekly Downloads

41,658

Version

1.0.3

License

MIT

Unpacked Size

3.4 kB

Total Files

5

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar