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'

Seeley

More information is needed to answer your question, such as how are you importing the scss file into your app. – Natty

thanks for notyfing me that.I'll complete my question – Seeley

there is a section on the documents for your use case storybook.js.org/configurations/custom-webpack-config – Escudo

Thanks a lot, I'll try to solve it following the documentation steps. – Seeley

Answer 1

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]'
          }
       }
     }
   ]
 }
}

Seeley

Answer 2

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!

Cottingham

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. – Fervent

This works if you run the Storybook, but fails on build! - github.com/storybookjs/storybook/issues/11052 – Goins

Answer 3

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',
  ]
}

Jenellejenesia

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. – Objectivism

Answer 4

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;
  },
};

Mainstay