https://github.com/kunl/storybook-preset-stylus

Stylus preset from storybook
https://github.com/kunl/storybook-preset-stylus

storybook storybook-addon stylus

Last synced: about 2 months ago
JSON representation

Stylus preset from storybook

• Host: GitHub
• URL: https://github.com/kunl/storybook-preset-stylus
• Owner: kunl
• License: mit
• Created: 2022-07-29T08:17:03.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-01T02:45:24.000Z (over 2 years ago)
• Last Synced: 2024-11-15T21:51:34.258Z (3 months ago)
• Topics: storybook, storybook-addon, stylus
• Language: JavaScript
• Homepage:
• Size: 197 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Stylus preset for Storybook

One-line Stylus configuration for storybook.

## Basic usage

```

yarn add -D storybook-preset-stylus css-loader stylus stylus-loader style-loader

```

Then add the following to `.storybook/main.js`:

```js

module.exports = {

  addons: ['storybook-preset-stylus'],

};

```

## Advanced usage

You can pass configurations by using Object addon declaration for `storybook-preset-stylus` and adding the configurations under the `options` key. You can pass configurations into the preset's webpack loaders using `styleLoaderOptions`, `cssLoaderOptions`, and `stylusLoaderOptions` 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-stylus',

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

  ]

}

```