storybook: React + Storybook + SCSS modules not working

Just tried again from scratch, repeating step by step from Storybook docs and it’s still not working. Tried downgrading sass-loader to 10.2.1, still not working.

It’s a brand new installation of React + Storybook with SASS following the app documentation and it’s broken, it’s kinda nuts that this is still on “needs triage” tag 1 month after the bug was created.

I have a workaround that may help until this is resolved. My project was bootstrapped with create react.

In your package.json add a script for sass

{
  ...
  scripts: {
    "sass": "sass --watch ./src/styles/_index.scss ./.storybook/main.css"
  }
}

Then add main.css to .storybook/preview.js

import './main.css';

Run both npm run sass and npm run storybook or yarn appropriately in separate terminals.

Running Node 16.5.0 + Npm 7.19.1

I followed this step by step: https://github.com/storybookjs/presets/tree/master/packages/preset-scss but it didn’t work. Only after I removed the line "@storybook/preset-scss", from my main.js it worked. Really weird as it’s what it says in the documentation. It must be conflicting with create-react-app or something?

My main.js now looks like this:

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
};

My file is located in stories and is called mycomp.scss and is imported in MyComp.jsx as import "./mycomp.scss";

@spaceflora After dicking around with this for what felt like eternity I came across this plugin:

https://github.com/RyanClementsHax/storybook-addon-next

and it solved EVERY problem I was having. It literally works right out the box, with css/scss/global styles AND modules. My main.js file now looks like this:

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-addon-next',
    '@storybook/addon-a11y',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: (config) => {
    config.resolve.alias = {
      ...config.resolve?.alias,
      '@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')],
    };
    config.resolve.roots = [
      path.resolve(__dirname, '../public'),
      'node_modules',
    ];
    return config;
  },
};

So if anyone is having trouble getting scss modules and tailwind working with Storybook then give this plugin a go…

"sass": "^1.49.9",
"sass-loader": "^10.2.1",
"style-loader": "^3.3.1",
"typescript": "~4.3.5"

After downgrade still same error

this article helped: https://bitcoden.com/answers/using-kebab-case-css-classnames-in-css-or-sass-modules-when-using-next-js

@assentorp’s solution worked for me: I removed the @storybook/preset-scss addon from main.js. I’m using Storybook v7.

// .storybook/main.js

const path = require('path');

module.exports = {
  ...
  webpackFinal: async (config) => {
    config.module.rules.push(
      {
        test: /\.s(a|c)ss$/,
        include: path.resolve(__dirname, '../'),
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                auto: true,
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
            },
          },
          'sass-loader'
        ],
      },
    );
    return config;
  },
  ...
}; 

works for me

Can you detail your configuration please ? Do you use any storybook presets / addon ?

@spaceflora After dicking around with this for what felt like eternity I came across this plugin:

https://github.com/RyanClementsHax/storybook-addon-next

and it solved EVERY problem I was having. It literally works right out the box, with css/scss/global styles AND modules. My main.js file now looks like this:

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-addon-next',
    '@storybook/addon-a11y',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: (config) => {
    config.resolve.alias = {
      ...config.resolve?.alias,
      '@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')],
    };
    config.resolve.roots = [
      path.resolve(__dirname, '../public'),
      'node_modules',
    ];
    return config;
  },
};

So if anyone is having trouble getting scss modules and tailwind working with Storybook then give this plugin a go…

This solved my issues after 4 hours of pain. Unbelievable how badly documented Storybook is when it comes to Sass.

I changed the main.js configuration to use the webpackFinal found here. It’s working for global styles, but not for modules. https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config I’m sorry for bothering, maybe someone can use it.

@FelipeZNascimento @XavierOlland @xiaozhiwen1998 fixed this way ( .storybook/main.js ). The main point is that you have to setup webpackFinal inside of the core object. I’ve tried with ‘@storybook/preset-scss’ - no luck 😦 Hope that it’ll help you

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
    "../src/core/components/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
    "@storybook/preset-ant-design",
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5",
    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, '../'),
      });
  
      // Return the altered config
      return config;
    },
  }
}

// .storybook/main.js

const path = require('path');

module.exports = {
  ...
  webpackFinal: async (config) => {
    config.module.rules.push(
      {
        test: /\.s(a|c)ss$/,
        include: path.resolve(__dirname, '../'),
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                auto: true,
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
            },
          },
          'sass-loader'
        ],
      },
    );
    return config;
  },
  ...
}; 

works for me

It work for me when I removed the configuration of package storybook-addon-sass-postcss in main.js.

in preview.js add: import ‘…/src/styles/index.scss’;

Adding my voice to the discussion to say that I am also having pretty much the same issue with Nextjs/Tailwind. global Scss files are working fine, modules are not…

For anybody coming to this issue on 7.0+, please take a look at https://storybook.js.org/addons/@storybook/addon-styling which is our recommended way to deal with styling integrations.