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.