https://github.com/0xtheprodev/storybook-addon-sass-postcss
Storybook AddOn that incorporates PostCSS Preprocessor over CSS Modules with Sass support
https://github.com/0xtheprodev/storybook-addon-sass-postcss
css-modules postcss sass storybook storybook-addon webpack
Last synced: about 1 month ago
JSON representation
Storybook AddOn that incorporates PostCSS Preprocessor over CSS Modules with Sass support
- Host: GitHub
- URL: https://github.com/0xtheprodev/storybook-addon-sass-postcss
- Owner: 0xTheProDev
- License: mit
- Created: 2021-11-15T19:41:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-11T19:14:30.000Z (about 1 month ago)
- Last Synced: 2025-04-12T23:33:55.863Z (about 1 month ago)
- Topics: css-modules, postcss, sass, storybook, storybook-addon, webpack
- Language: TypeScript
- Homepage: https://storybook.js.org/addons/storybook-addon-sass-postcss
- Size: 26.8 MB
- Stars: 4
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon Sass PostCSS
[](https://github.com/sponsors/0xTheProDev)
[](https://storybook.js.org/addons/storybook-addon-sass-postcss)
[](https://www.npmjs.com/package/storybook-addon-sass-postcss)
[](https://www.npmjs.com/package/storybook-addon-sass-postcss)
[](https://www.npmjs.com/package/storybook-addon-sass-postcss)
[](https://github.com/0xTheProDev/storybook-addon-sass-postcss/LICENSE)
[](https://www.npmjs.com/package/storybook-addon-sass-postcss)
[](https://www.npmjs.com/package/storybook-addon-sass-postcss)
[](https://github.com/0xTheProDev/storybook-addon-sass-postcss/security)
[](https://github.com/0xTheProDev/storybook-addon-sass-postcss/issues)
[](https://github.com/0xTheProDev/storybook-addon-sass-postcss/issues?q=is%3Aissue+is%3Aclosed)
[](https://github.com/0xTheProDev/storybook-addon-sass-postcss/stargazers)
[](https://github.com/0xTheProDev/storybook-addon-sass-postcss/network/members)
## Description
The Storybook PostCSS addon can be used to run the PostCSS preprocessor with Sass support against your stories in [Storybook](https://storybook.js.org).
> :beginner: **Use of Storybook v8 is strongly suggested with this addon since v0.2; The addon might be compatible with older Storybook versions as well but will no longer be extensively tested against.**
## Getting Started
Install this addon by adding the `storybook-addon-sass-postcss` dependency:
```sh
yarn add -D storybook-addon-sass-postcss
```
Then within `.storybook/main.js`:
```js
module.exports = {
addons: ['storybook-addon-sass-postcss'],
};
```
And create a PostCSS config in the base of your project, like `postcss.config.js`, that contains:
```js
module.exports = {
// Add your installed PostCSS plugins here:
plugins: [
// require('autoprefixer'),
// require('postcss-color-rebeccapurple'),
],
};
```
## PostCSS 8+
If your project requires you to be using PostCSS v8, you can replace the included PostCSS by passing `postcssLoaderOptions` to this addon.
First, you'll need to install PostCSS v8 as a dependency of your project:
```sh
yarn add -D postcss@^8
```
Then, you'll need to update your addons config. Within `.storybook/main.js`:
```diff
module.exports = {
addons: [
- 'storybook-addon-sass-postcss',
+ {
+ name: 'storybook-addon-sass-postcss',
+ options: {
+ postcssLoaderOptions: {
+ implementation: require('postcss'),
+ },
+ },
+ },
]
}
```
When running Storybook, you'll see the version of PostCSS being used in the logs. For example:
```sh
info => Using PostCSS preset with [email protected]
```
## Dart Sass
Similar to above, you can provide reference to your local Sass transpiler to invoke Dart Sass.
First, you'll need to install PostCSS v8 as a dependency of your project:
```sh
yarn add -D sass
```
Then, you'll need to update your addons config. Within `.storybook/main.js`:
```diff
module.exports = {
addons: [
- 'storybook-addon-sass-postcss',
+ {
+ name: 'storybook-addon-sass-postcss',
+ options: {
+ sassLoaderOptions: {
+ implementation: require('sass'),
+ },
+ },
+ },
]
}
```
## Sass Only
Be default, this plugin will try to transform both CSS and SASS modules. You can change this behaviour by passing _optional_ argument `rule`.
```diff
module.exports = {
addons: [
- 'storybook-addon-sass-postcss',
+ {
+ name: 'storybook-addon-sass-postcss',
+ options: {
+ rule: {
+ test: /\.(scss|sass)$/i,
+ },
+ },
+ },
]
}
```
### Using with TailwindCSS
By default, Sass loading is done before PostCSS preprocessing. But this does not work well with TailwindCSS. As it relies on classnames and non-standard behaviours that are only exposed via PostCSS plugin. So to overcome this, Sass must be loaded after preprocessing has been done.
```diff
module.exports = {
addons: [
- 'storybook-addon-sass-postcss',
+ {
+ name: 'storybook-addon-sass-postcss',
+ options: {
+ loadSassAfterPostCSS: true,
+ },
+ },
]
}
```
## Loader Options
You can specify loader options for `style-loader`, `css-loader`, `sass-loader` and `postcss-loader` by passing options to this addon as `styleLoaderOptions`, `cssLoaderOptions`, `sassLoaderOptions` or `postcssLoaderOptions` respectively.