Skip to content

Commit

Permalink
Merge pull request #25479 from storybookjs/docs/styling-and-css
Browse files Browse the repository at this point in the history 
Docs: Add more details for styling and css docs
(cherry picked from commit da912f6)
  • Loading branch information
@storybook-bot
Shaun Evening authored and storybook-bot committed Jan 8, 2024
1 parent 6fa6a79 commit ba3b525
Showing 1 changed file with 142 additions and 36 deletions.
178 changes: 142 additions & 36 deletions docs/configure/styling-and-css.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,18 @@
title: 'Styling and CSS'
---

<!-- Not Angular -->
<If notRenderer="angular">

There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration.

If you're using Vite to build your Storybook, you're covered! Storybook will use your vite config file which supports most popular styling tools out-of-the-box 🎉. However, if you're using Webpack, you may need some extra configuration. To make this easier, we recommend using [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/).
## CSS

**Note**: If you're using Storybook with Angular or Next.js, you can skip this section. Storybook will automatically use the same styling configuration as your application.
Storybook supports importing CSS files in a few different ways. Storybook will inject these tags into the preview iframe where your components render, not the Storybook Manager UI. The best way to import CSS depends on your project's configuration and your preferences.

## Importing CSS files
### Import bundled CSS (Recommended)

Storybook is pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.js`](./index.md#configure-story-rendering).
All Storybooks are pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.ts`](./overview.md#configure-story-rendering). These files will be subject to HMR, so you can see your changes without restarting your Storybook server.

<!-- prettier-ignore-start -->

Expand All @@ -23,65 +26,167 @@ Storybook is pre-configured to recognize imports for CSS files. To add global CS

<!-- prettier-ignore-end -->

If your component files import their CSS files, this will work too. The noticeable exception to this is if you're using CSS processor tools like Sass or Postcss.
If your component files import their CSS files, this will work too. However, if you're using CSS processor tools like Sass or Postcss, you may need some more configuration.

### Include static CSS

If you have a global CSS file that you want to include in all your stories, you can import it in [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head).
However, these files will not be subject to HMR, so you'll need to restart your Storybook server to see your changes.

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/storybook-preview-import-global-styles.js.mdx',
'common/storybook-preview-import-global-styles.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

## CSS processors
## CSS modules

If you're using Vite as your builder, you're covered! Vite supports Sass and PostCSS out-of-the-box 🎉
### Vite

However, if you're using Webpack and want to use Sass and PostCss, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s).
Vite comes with CSS modules support out-of-the-box. If you have customized the CSS modules configuration in your `vite.config.js` this will automatically be applied to your Storybook as well. Read more about [Vite's CSS modules support](https://vitejs.dev/guide/features.html#css-modules).

### Webpack

<IfRenderer renderer='react'>
<Callout
variant="info"
icon="📣"
title="Using `@storybook/nextjs`?"
>
Storybook recreates your Next.js configuration, so you can use CSS modules in your stories without any extra configuration.

</Callout>
</IfRenderer>

If you're using Webpack and want to use CSS modules, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools.

## PostCSS

### Vite

Vite comes with PostCSS support out-of-the-box. If you have customized the PostCSS configuration in your `vite.config.js` this will automatically be applied to your Storybook as well. Read more about [Vite's PostCSS support](https://vitejs.dev/guide/features.html#postcss).

### Webpack

<IfRenderer renderer='react'>
<Callout
variant="info"
icon="📣"
title="Using `@storybook/nextjs`?"
>
Storybook recreates your Next.js configuration, so you can use PostCSS in your stories without any extra configuration.

</Callout>
</IfRenderer>

If you're using Webpack and want to use PostCSS, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools.

## CSS pre-processors

### Vite

Vite comes with Sass, Less, and Stylus support out-of-the-box. Read more about [Vite's CSS Pre-processor support](https://vitejs.dev/guide/features.html#css-pre-processors).

### Webpack

<IfRenderer renderer='react'>
<Callout
variant="info"
icon="📣"
title="Using `@storybook/nextjs`?"
>
Storybook recreates your Next.js configuration, so you can use Sass in your stories without any extra configuration.

</Callout>
</IfRenderer>

If you're using Webpack and want to use Sass or less, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s).

## CSS-in-JS

CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with `@storybook/addon-themes`'s [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider).

## Adding webfonts

### `.storybook/preview-head.html`

If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).

<IfRenderer renderer='angular'>
### `.storybook/preview.ts`

## Troubleshooting
If you're using something like [`fontsource`](https://fontsource.org/) for your fonts, you can import the needed css files in your [`.storybook/preview.ts`](./overview.md#configure-story-rendering) file.

### Styles aren't being applied with Angular
</If>

The latest Angular releases introduced significant changes in configuring and styling projects. If you're working with an Angular version greater than 13 and your styles aren't being applied, you may need to check your `angular.json` and adjust the `builder` configuration to import your CSS:
<!-- Angular only -->
<IfRenderer renderer="angular">

```json
{
"my-project": {
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"styles": ["src/styles.css", "src/styles.scss"]
}
}
}
}
}
```
Storybook for Angular relies on the Angular CLI to build your stories. This means that you can use any CSS preprocessor that the Angular CLI supports. You can read more about this in the [Angular CLI documentation](https://angular.io/guide/workspace-config#style-script-config).

Additionally, if you need Storybook-specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md#troubleshooting), which will override the application's styles:
## Global styles

To add global styles to your Storybook, you can add them to the `styles` array in your `angular.json` file. This will add the styles to the preview iframe where your components render, not the Storybook Manager UI.

Don't forget to also add your global styles to your `build-storybook` target in your `angular.json` file. This will ensure that your global styles are included in the static build of your Storybook as well.

```json
{
{
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
"browserTarget": "my-default-project:build",
"styles": [".storybook/custom-styles.scss"]
"configDir": ".storybook",
"browserTarget": "angular-latest:build",
"compodoc": true,
"compodocArgs": ["-e", "json", "-d", "."],
"port": 6006,
"styles": [
// Add your global styles here
"@angular/material/prebuilt-themes/indigo-pink.css",
"@fontsource/roboto/300.css",
"@fontsource/roboto/400.css",
"@fontsource/roboto/500.css",
"@fontsource/roboto/700.css",
"@fontsource/material-icons",
"src/styles.scss"
]
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"configDir": ".storybook",
"browserTarget": "angular-latest:build",
"compodoc": true,
"compodocArgs": ["-e", "json", "-d", "."],
"styles": [
// Add your global styles here
"@angular/material/prebuilt-themes/indigo-pink.css",
"@fontsource/roboto/300.css",
"@fontsource/roboto/400.css",
"@fontsource/roboto/500.css",
"@fontsource/roboto/700.css",
"@fontsource/material-icons",
"src/styles.scss"
],
"outputDir": "storybook-static"
}
}
}
```

### NX component libraries not loading styles
## Troubleshooting

If you're working with Storybook and [Nx libraries](https://nx.dev/structure/library-types),
you can extend your project's configuration (i.e., `project.json`) and provide the application's styles.
If you're working with Storybook and [Nx libraries](https://nx.dev/structure/library-types), you can extend your project's configuration (i.e., project.json) and provide the application's styles.

For earlier Nx versions (before `14.1.8`), your configuration would look like this:
For earlier Nx versions (before 14.1.8), your configuration would look like this:

```json
"build-storybook": {
Expand All @@ -99,7 +204,7 @@ For earlier Nx versions (before `14.1.8`), your configuration would look like th
}
```

Starting with version `14.1.8`, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` `options` configuration object. For example:
Starting with version 14.1.8, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` options configuration object. For example:

```json
"storybook": {
Expand All @@ -126,6 +231,7 @@ Starting with version `14.1.8`, Nx uses the Storybook builder directly, which me
}
```

When Nx runs, it will load Storybook's configuration and styling based on [`storybook`'s `browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
When Nx runs, it will load Storybook's configuration and styling based on [`storybook.browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).

</IfRenderer>

0 comments on commit ba3b525

Please sign in to comment.