import scss file with Storybook

Question

I'm currently facing an issue with Storybook. Everything is working great in my app, with webpack. Storybook seems to have issue with my configuration.

Here's my webpack.config.js :

module.exports = {
   entry: './index.js',
   output: {
   path: path.join(__dirname, 'dist'),
   filename: 'bundle.js'
},
module: {
   loaders: [
   {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      include: __dirname
   },
   {
      test: /\.scss$/,
         use: [
         {loader: "style-loader"}, 
         {loader: "css-loader"},
         {loader: "sass-loader",
          options: {
            includePaths: [__dirname]
    }
  }]
},

Storybook have issue with parsing the scss file, do I need to create a specific webpack.config.js for Storybook to solve this?

In my main app I'm importing my scss file this way : import './styles/base.scss'

More information is needed to answer your question, such as how are you importing the scss file into your app. — thomasmeadows, Aug 13 '17 at 13:35
there is a section on the documents for your use case https://storybook.js.org/configurations/custom-webpack-config/ — Sagiv b.g, Aug 13 '17 at 13:56
Thanks a lot, I'll try to solve it following the documentation steps. — awzx, Aug 13 '17 at 13:58

score 14 · Accepted Answer · edited Dec 29 '20 at 20:25

It worked just by adding a webpack.config.js quite similar to my existing one :

const path = require('path')

module.exports = {
    module: {
     rules: [
     {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../')
     },
     {  test: /\.css$/,
        loader: 'style-loader!css-loader',
        include: __dirname
     },
     {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: 'fonts/[hash].[ext]',
            limit: 5000,
            mimetype: 'application/font-woff'
          }
         }
     },
     {
       test: /\.(ttf|eot|svg|png)$/,
       use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[hash].[ext]'
          }
       }
     }
   ]
 }
}

score 7 · Answer 2 · answered Mar 17 '20 at 08:03

7

For those running storybook on Create React App, adding MiniCssExtractPlugin to .storybook/webpack.config.jon solved my problem loading sass files:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

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

  config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }))

  return config;
};

Credits to Nigel Sim!

answered Mar 17 '20 at 08:03

Dani Riera

71
1
2

2

Wow, I spent hours looking for a sass solution and this is the only solution that worked for me. I'm running Gatsby on top of React. – Eric Nguyen Apr 16 '20 at 00:52
This works if you run the Storybook, but fails on build! - https://github.com/storybookjs/storybook/issues/11052 – NiRUS Jun 06 '20 at 15:02

score 5 · Answer 3 · edited Jan 28 '22 at 07:08

There is simple code for `main.js` in Storybook 6, and it works fine for me!

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  stories: [...],
  addons:[...],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader?url=false', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

score 5 · Answer 4 · answered Aug 26 '22 at 12:03

SCSS preset for Storybook

Basic usage

npm i -D @storybook/preset-scss css-loader sass sass-loader style-loader

Then add the following to .storybook/main.js:

module.exports = {
  addons: ['@storybook/preset-scss'],
};

OR Advanced usage

You can pass configurations by using Object addon declaration for @storybook/preset-scss and adding the configurations under the options key. You can pass configurations into the preset's webpack loaders using styleLoaderOptions, cssLoaderOptions, and sassLoaderOptions keys. See documentation for each respective loader to learn about valid options. You can register other addons through the string declaration as normal.

module.exports = {
  addons: [
    {
      name: '@storybook/preset-scss',
      options: {
        cssLoaderOptions: {
           modules: true,
           localIdentName: '[name]__[local]--[hash:base64:5]',
        }
      }
    },
    // You can add other presets/addons by using the string declaration
    '@storybook/preset-typescript',
    '@storybook/addon-actions',
  ]
}

This simple solution did it for me. I already had sass and loader packages for the main app so just installing and using the `@storybook/preset-scss` was good enough to get the `.scss` imports working. — Damb, Dec 11 '22 at 15:15

import scss file with Storybook

4 Answers4

There is simple code for main.js in Storybook 6, and it works fine for me!

There is simple code for `main.js` in Storybook 6, and it works fine for me!