From bb22c9a1139e2095bf536637b6a5de429afbec3f Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Wed, 12 Jan 2022 21:57:43 +0000 Subject: [PATCH] minor adjustments to the install addons docs --- docs/addons/install-addons.md | 19 +++++++++++++++---- .../storybook-preset-scss.webpack-4.js.mdx | 7 +++++++ .../storybook-preset-scss.webpack-5.js.mdx | 7 +++++++ 3 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx create mode 100644 docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx diff --git a/docs/addons/install-addons.md b/docs/addons/install-addons.md index 5d52d4e38491..c110299f640e 100644 --- a/docs/addons/install-addons.md +++ b/docs/addons/install-addons.md @@ -40,9 +40,20 @@ Storybook preset addons are grouped collections of specific `babel`,`webpack` an For example, to use SCSS styling, run the following command to install the addon and the required dependencies: -```sh -yarn add -D @storybook/preset-scss css-loader sass sass-loader style-loader -``` + + + + + + +
+ 💡 Tip: Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet. +
Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) to the following: @@ -81,4 +92,4 @@ Consider the following example: Preset addons may also have addon-specific configuration. Read their respective READMEs. -Now, when Storybook starts up, it will update webpack's CSS loader to use modules and adjust how styling is defined. +Now, when Storybook starts up, it will update webpack's CSS loader to use modules and adjust how styling is defined. \ No newline at end of file diff --git a/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx b/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx new file mode 100644 index 000000000000..66ac48d5fc91 --- /dev/null +++ b/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx @@ -0,0 +1,7 @@ +```shell +# With npm +npm install @storybook/preset-scss css-loader@5.2.7 sass sass-loader@10.1.1 style-loader@2.0.0 --save-dev + +# With yarn +yarn add --dev @storybook/preset-scss css-loader@5.2.7 sass sass-loader@10.1.1 style-loader@2.0.0 +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx b/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx new file mode 100644 index 000000000000..227b75a86037 --- /dev/null +++ b/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx @@ -0,0 +1,7 @@ +```shell +# With npm +npm install @storybook/preset-scss css-loader sass sass-loader style-loader --save-dev + +# With yarn +yarn add --dev @storybook/preset-scss css-loader sass sass-loader style-loader +``` \ No newline at end of file