Source:  Twitter logo

I'm currently facing issue on storybook react using scss. I'm using sb init to create the storybook file. Everything is working, all the addons loaded but only the style is not working. If I use css file, the style will be working.

I'm already following the instruction from documentation on using @storybook/preset-scss and the webpackFinal config, but it still not working

this is a sample from storybook file

import './button.scss'; is not working properly

import React from 'react';
import PropTypes from 'prop-types';

import './button.scss'; -> this one not working

export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

Button.propTypes = {
  primary: PropTypes.bool,
  backgroundColor: PropTypes.string,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: 'medium',
  onClick: undefined,
};

this is my /storybook/main.js file

const path = require('path')

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss"
  ],
  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', 'sass-loader'],
      include: path.resolve(__dirname, '../src'),
    });

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

webpack.config.js

const path = require('path')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base')

const config = {
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: 'index.js',
    libraryTarget: 'commonjs2',
    library: 'violets'
  }
}

module.exports = merge(baseConfig, config)

webpack.base.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const autoprefixer = require('autoprefixer')

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin({})
    ],
  },
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        loader: require.resolve('babel-loader'),
        options: {
          compact: true
        }
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        sideEffects: true,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }
          },
          {
            loader: require.resolve('sass-loader')
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                /*  eslint global-require: ["off"]  */
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  flexbox: 'no-2009'
                })
              ]
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: 'file-loader'
      },
    ]
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'violets.min.css'
    })
  ]
}

I encountered similar problem and the following Github thread fixed for me:

storybookIssue-12464

Here is the summary (ensure that you have scss installed ):

  1. In my case, I did not have preset-scss addon installed. I did it by using:

    npm install @storybook/preset-scss --save

In you case it seems like preset-scss addon is already present.

  1. Commenting out config rules in main.js file:

    config.module.rules.push({

    test: /\.scss$/,

    use: ["style-loader", "css-loader", "sass-loader"],

    include: path.resolve(__dirname, "../"), });

  2. If this doesn't work, try importing your scss file in preview.js of storybook config folder.

    .storybook > preview.js > import your CSS file;

Finally, some reference which might be useful for you: SCSS-Presets

3 users liked answer #0dislike answer #03
odus-ex profile pic
odus-ex

If you have the storybook version "^6.5.0" you can do the following:

  1. If you don't have the sass package installed, just run:
yarn add sass
  1. Use a storybook addon for scss Install the addon by running
yarn add @storybook/preset-scss --D
  1. Then add the following addon to your list of used addons '@storybook/preset-scss' on the .storybook\main.js file.

You'll see more about it on https://github.com/storybookjs/storybook/issues/12464#issuecomment-730196791.

2 users liked answer #1dislike answer #12
Ëuclïdës Ďŕÿ'C profile pic
Ëuclïdës Ďŕÿ'C

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).