minor adjustments to the install addons docs

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
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-preset-scss.webpack-4.js.mdx',
+    'common/storybook-preset-scss.webpack-5.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<div class="aside">
+ 💡 Tip: Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet. 
+</div>
 
 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.
 </div>
 
-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.

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
+```

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
+```