From 7fc78e3442c74bd04a2e5a4632d5e52cd6ead4b2 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Thu, 2 Mar 2023 11:01:35 -0500
Subject: [PATCH] Update bootstrap recipe

---
 docs/getting-started/bootstrap.md | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/docs/getting-started/bootstrap.md b/docs/getting-started/bootstrap.md
index ab12ec2..2718fd2 100644
--- a/docs/getting-started/bootstrap.md
+++ b/docs/getting-started/bootstrap.md
@@ -39,6 +39,30 @@ module.exports = {
 };
 ```
 
+**NOTE:** If you want to use Bootstrap's `.scss` files, add the styling addon like so:
+
+```js
+module.exports = {
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-essentials",
+    {
+      name: "@storybook/addon-styling",
+      options: {
+        sass: {
+          // Require your sass preprocessor here
+          // I recommend dart sass (yarn add -D sass)
+          implementation: require("sass"),
+        },
+      },
+    },
+  ],
+};
+```
+
 ## 🥾 Import Bootstrap
 
 To give your stories access to Bootstrap's styles and JavaScript, import them into your `.storybook/preview.js` file.
@@ -60,6 +84,8 @@ export const parameters = {
 };
 ```
 
+If you're using `scss` import your `index.scss` file instead of Bootstrap's `bootstrap.min.css` file.
+
 ## 🎨 Provide your theme(s)
 
 Bootstrap now supports light and dark color modes out of the box as well as the ability to make your own custom modes. These modes can be activated by setting a `data-bs-theme` attribute on a parent element.