# storybook-preset-scss

> fast scss config for storybook

Latest version **0.1.4** (published 2021-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install storybook-preset-scss
pnpm add storybook-preset-scss
yarn add storybook-preset-scss
bun add storybook-preset-scss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2021-07-12 |
| First published | 2021-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 5.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | joshuasui |
| Maintainers | joshuasui |

## Links

- npm: https://www.npmjs.com/package/storybook-preset-scss
- Repository: git@gitlab.alibaba-inc.com:whale/storybook-preset-scss
- npm.io page: https://npm.io/package/storybook-preset-scss

## Dependencies (5)

- [node-sass](https://npm.io/package/node-sass.md) ^4.14.1
- [css-loader](https://npm.io/package/css-loader.md) ^5.2.6
- [sass-loader](https://npm.io/package/sass-loader.md) ^8.0.2
- [cache-loader](https://npm.io/package/cache-loader.md) ^4.1.0
- [thread-loader](https://npm.io/package/thread-loader.md) ^3.0.4

## Recent versions

- 0.1.4 (latest) — 2021-07-12
- 0.1.3 — 2021-07-12
- 0.1.2 — 2021-07-11
- 0.1.1 — 2021-07-11
- 0.1.0 — 2021-07-11

## README

# storybook SCSS 配置

用于配置 scss，并修改默认 css 配置，仅兼容 webpack@4

## 安装

```
yarn add -D storybook-preset-scss
```

增加以下配置到 `.storybook/main.js`:

```js
module.exports = {
  addons: ['storybook-preset-scss'],
};
```

## API

你可以通过传递 options 来配置 storybook-preset-scss,配置如下：

1. cssRules 用于传递给修改后的 css loader，例如传递 exclude 等
2. scssRules 用于传递给修改后的 scss loader，使用同上
3. cssLoaderOptions 用于传递给 'css-loader' 配置
4. sassLoaderOptions 用于传递给 'sass-loader' 配置
5. threadLoaderOptions 用于传递给 'thread-loader' 配置
6. cacheLoaderOptions 用于传递给 'cache-loader' 配置

默认不需要任何配置即可正常使用

```
module.exports = {
  addons: [
    {
      name: 'storybook-preset-scss',
      options: {
        cssRules: {},
        scssRules: {},
        cssLoaderOptions: {
           <!-- modules: true, -->
           <!-- localIdentName: '[name]__[local]--[hash:base64:5]', -->
        }
      }
    },
    // 你可以添加其他 addOn 或 preset
    '@storybook/preset-typescript',
    '@storybook/addon-actions',
  ]
}
```

---
_Source: https://npm.io/package/storybook-preset-scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._