mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-21 05:02:39 +08:00
Merge pull request #11900 from storybookjs/fix_links_to_configure_section
@domyen thanks for the approval. Merging now
This commit is contained in:
commit
0f9f62e733
@ -4,7 +4,7 @@ title: 'Presets'
|
||||
|
||||
Storybook **presets** are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases.
|
||||
|
||||
For example, to write your stories in Typescript, rather than [manually configuring Storybook for typescript](../configure/integration.md#typescript) with individual [babel](../configure/integration.md#custom-configuration) and [webpack](../configure/integration.md#extending-storybook’s-webpack-config) configs, you can use the [`@storybook/preset-typescript`](https://www.npmjs.com/package/@storybook/preset-typescript) package, which does the heavy lifting for you.
|
||||
For example, to write your stories in Typescript, rather than [manually configuring Storybook for typescript](../configure/typescript.md) with individual [babel](../configure/babel.md#custom-configuration) and [webpack](../configure/webpack.md#extending-storybooks-webpack-config) configs, you can use the [`@storybook/preset-typescript`](https://www.npmjs.com/package/@storybook/preset-typescript) package, which does the heavy lifting for you.
|
||||
|
||||
## Basic usage
|
||||
|
||||
|
@ -161,9 +161,9 @@ Entries are the place to register entry points for the preview. For example it c
|
||||
|
||||
## Advanced Configuration
|
||||
|
||||
The presets API is also more powerful than the [standard configuration options](../configure/integration#extending-storybook’s-webpack-config) available in Storybook, so it's also possible to use presets for more advanced configuration without actually publishing a preset yourself.
|
||||
The presets API is also more powerful than the [standard configuration options](../configure/webpack.md#extending-storybooks-webpack-config) available in Storybook, so it's also possible to use presets for more advanced configuration without actually publishing a preset yourself.
|
||||
|
||||
For example, some users want to configure the webpack for Storybook's UI and addons ([issue](https://github.com/storybookjs/storybook/issues/4995)), but this is not possible using [standard webpack configuration](../configure/integration.md#default-configuration) (it used to be possible before SB4.1). However, you can achieve this with a private preset.
|
||||
For example, some users want to configure the webpack for Storybook's UI and addons ([issue](https://github.com/storybookjs/storybook/issues/4995)), but this is not possible using [standard webpack configuration](../configure/webpack.md#default-configuration) (it used to be possible before SB4.1). However, you can achieve this with a private preset.
|
||||
|
||||
If it doesn't exist yet, create a file `.storybook/main.js`:
|
||||
|
||||
|
@ -33,8 +33,8 @@ Your project may have additional requirements before components can be rendered
|
||||
If you see errors on the CLI when you run the `yarn storybook` command. It’s likely you need to make changes to Storybook’s build configuration. Here are some things to try:
|
||||
|
||||
- [Presets](../api/presets.md) bundle common configurations for various technologies into Storybook. In particular presets exist for Create React App, SCSS and Ant Design.
|
||||
- Specify a custom [Babel configuration](../configure/integration.md#custom-babel-config) for Storybook. Storybook automatically tries to use your project’s config if it can.
|
||||
- Adjust the [webpack configuration](../configure/integration.md#webpack) that Storybook uses. Try patching in your own configuration if needed.
|
||||
- Specify a custom [Babel configuration](../configure/babel.md#custom-babel-config) for Storybook. Storybook automatically tries to use your project’s config if it can.
|
||||
- Adjust the [webpack configuration](../configure/webpack.md) that Storybook uses. Try patching in your own configuration if needed.
|
||||
|
||||
</details>
|
||||
|
||||
@ -84,7 +84,7 @@ Theme users may need to add a decorator to `.storybook/preview.js`, [see above](
|
||||
<details>
|
||||
<summary>@import CSS into components</summary>
|
||||
|
||||
Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak the webpack config](../configure/integration.md#webpack). Angular components require [a special import](../configure/integration.md#importing-css-files).
|
||||
Storybook allows you to import CSS files in your components directly. But in some cases you may need to [tweak the webpack config](../configure/webpack.md#extendingstorybooks-webpack-config). Angular components require [a special import](../configure/styling-and-css.md#importing-css-files).
|
||||
|
||||
</details>
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
```js
|
||||
./storybook/main.js
|
||||
// ./storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
webpackFinal: (config) => {
|
||||
|
@ -121,7 +121,7 @@ In addition, you can interleave your own components to customize the auto-genera
|
||||
|
||||
## Story file names
|
||||
|
||||
Unless you use a custom [webpack configuration](../configure/integration#extending-storybooks-webpack-config), all of your story files should have the suffix `*.stories.@(j|t)sx?`. For example, "Badge.stories.js" or "Badge.stories.tsx". This tells Storybook and its docs preset to display the docs based on the file contents.
|
||||
Unless you use a custom [webpack configuration](../configure/webpack.md#extending-storybooks-webpack-config), all of your story files should have the suffix `*.stories.@(j|t)sx?`. For example, "Badge.stories.js" or "Badge.stories.tsx". This tells Storybook and its docs preset to display the docs based on the file contents.
|
||||
|
||||
## Inline stories vs. iframe stories
|
||||
|
||||
|
@ -112,7 +112,7 @@ To get a "documentation-only story", in your UI, define a `<Meta>` as you normal
|
||||
|
||||
## MDX file names
|
||||
|
||||
Unless you use a custom [webpack configuration](../configure/integration.md#extending-storybooks-webpack-config), all of your MDX files should have the suffix `*.stories.mdx`. This tells Storybook to apply its special processing to the `<Meta>` and `<Story>` elements in the file.
|
||||
Unless you use a custom [webpack configuration](../configure/webpack.md#extending-storybooks-webpack-config), all of your MDX files should have the suffix `*.stories.mdx`. This tells Storybook to apply its special processing to the `<Meta>` and `<Story>` elements in the file.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user