How to add sass support to storybook?

Member

by jasen , in category: Javascript , 22 days ago

How to add sass support to storybook?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by orpha , 21 days ago

@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.