Component-level css not loading into stories

I created a react app using create-react-app, and added a button component, a css for the button. When I load the story for the button, the styles are not loaded for the button. Pasting below, the related files. Is there any configuration that I am to do, to get this up and running with styles?

github repo for the project

Component: index.js

 import React, { Component } from 'react';
import styles from './style.css';
class CustomButton extends Component{
    render(){
        return (
            <button className={styles.customButton}>Hello</button>     
        );
    }
}
export default CustomButton;

style.css:

.customButton {
    border: 1px solid red;
    padding: 10px;
    background-color: rgb(223, 19, 19);
}

Story file:

import React from 'react';
import CustomButton from '../../src/index';
import { storiesOf } from '@storybook/react';


const story = storiesOf("Custom button",module);

story.addWithJSX("simple",() => <CustomButton/>);

System info:

Environment Info:

  System:
    OS: Windows 7 6.1.7601
    CPU: (2) x64 Intel(R) Core(TM) i3-2370M CPU @ 2.40GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.125
  npmPackages:
    @storybook/addon-info: ^5.3.19 => 5.3.19
    @storybook/components: ^5.3.19 => 5.3.19
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^5.3.19 => 5.3.19

[Sumolari]

I had the same issue where styles using SCSS in Vue Single File Components where ignored when building the Storybook using build-storybook:

<style lang="scss">
// ...
</style>

When the style was marked as css it worked fine. I managed to fix it for scoped styles, too, with the same solution.

Note that my Vue components are in a Yarn workspace and they are split in several packages that are marked as ES Modules using "type": "module" in their package.json. They are also marked as "sideEffects": false to enable tree-shaking.

I managed to fix this by adding a new rule for scss files and marking them as having side-effects. Without sideEffects: true this didn’t work for me either.

// .storybook/main.js
module.exports = {
  // ... other non-important stuff
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      sideEffects: true,
      use: ['vue-style-loader', 'css-loader', 'sass-loader'],
    });

    return config;
  },
};

[ruijdacd]

I have been encountering the same issue, only when building storybook and deploying it. Launching storybook in dev mode, it seems to load the styles correctly.

	"@storybook/addon-a11y": "^6.0.16",
    "@storybook/addon-actions": "^6.0.16",
    "@storybook/addon-docs": "^6.0.16",
    "@storybook/addon-essentials": "^6.0.16",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^6.0.16",