How to add sass support to storybook?

@jasen 

To add Sass support to Storybook, you need to follow these steps:

1. Install Sass in your project by running the following command:

1

npm install node-sass sass-loader

1. Create a file named webpack.config.js in the .storybook directory of your project.
2. Add the following code to the webpack.config.js file to configure Sass support:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const path = require('path');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
  });

  return config;
};

1. Import your Sass files in your stories or components as needed:

1

import '../path/to/your/styles.scss';

1. Run Storybook to see your components styled with Sass:

1

npm run storybook

By following these steps, you should have Sass support added to your Storybook project.