Can’t get Storybook to work with CSS Modules using SCSS

Explanation of the problem

There is an issue I’m facing while using Storybook with my React.js project that involves CSS Modules with SCSS. The problem arises when running Storybook with the provided configuration. Below are the relevant code snippets from the webpack.copy.js and main.js files.

The webpack.copy.js file, which is working correctly for “npm start,” is as follows:

const paths = require("../../paths");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { presets, plugins } = require("./webpack.config.babel");

module.exports = {
  // Configuration properties
};

On the other hand, the main.js file for Storybook seems to have an incorrect configuration that results in missing CSS styles for the components:

const path = require("path");

module.exports = {
  addons: [
    // Addon configuration
  ],

  stories: ["../src/**/*.stories.[tj]s"],

  webpackFinal: async (config, { configType }) => {
    // Webpack configuration modifications
  },
};

Upon running “npm run storybook,” the Storybook browser window opens, but the components are not styled with CSS. This issue indicates that the configuration in the main.js file might be incorrect. Assistance in resolving this problem would be highly appreciated.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Can’t get Storybook to work with CSS Modules using SCSS

To address the issue of missing CSS styles in Storybook when using CSS Modules with SCSS, you can make the following adjustments to the Storybook main.js configuration:

const path = require("path");

module.exports = {
  addons: [
    // Addon configuration
  ],

  stories: ["../src/**/*.stories.[tj]s"],

  webpackFinal: async (config, { configType }) => {
    // Find the CSS rule index
    const ruleCssIndex = config.module.rules.findIndex(
      (rule) => rule.test.toString() === "/\\.css$/"
    );

    // Set the 'module' option to true for CSS rule loaders
    config.module.rules[ruleCssIndex].use.map((item) => {
      if (item.loader && item.loader.includes("/css-loader/")) {
        item.options.modules = {
          mode: "local",
          localIdentName:
            configType === "PRODUCTION"
              ? "[local]__[hash:base64:5]"
              : "[name]__[local]__[hash:base64:5]",
        };
      }

      return item;
    });

    // Add a new rule for SCSS files
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../"),
    });

    return config;
  },
};

By modifying the webpackFinal function in the main.js file, this solution updates the CSS rule to support CSS Modules and adds a new rule for handling SCSS files. Make sure to include the necessary loaders (style-loader, css-loader, and sass-loader) and specify the appropriate paths and configurations for your project.

These adjustments should enable Storybook to correctly apply CSS styles to your components when using CSS Modules with SCSS.

module.exports = {
  stories: ["../src/**/*.stories.js"],
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "images/",
            },
          },
        ],
      },
    ],
  },
};

// Button.stories.js
import React from 'react';
import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
};

export const Primary = () => <Button variant="primary">Primary Button</Button>;
export const Secondary = () => <Button variant="secondary">Secondary Button</Button>;
export const Disabled = () => <Button disabled>Disabled Button</Button>;