How can I create an npm module using both react and css modules?

Question

I'm trying to create a react ui library on an npm module. It's created using React and css-modules.

When I import it on a different application, the modules do not have any styles on it and also they have no classname, so I think the css styles are broken.

Right now, I'm using webpack for bundling and babel for transpiling. The end result is a minimized version of the code. I have tried to import it without webpack bundling, but I get syntax error thanks to jsx. I'm using storybook to test the components and everything works well there.

All my components are using the syntax:

...
import styles from "./ComponentName.css"

const Component = () => (
    <Something className={styles.something}>
    </Something>
)

export defaults Component;

My webpack config is almost the default, only adding the css modules section and babel-loader:

...
{
    test: /\.css$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          importLoaders: 1,
          modules: true
        }
      },
      {
        loader: "postcss-loader",
        options: {
          plugins: loader => [
            require("postcss-nesting"),
            require("postcss-preset-env")({
              features: {
                "css-properties": true,
                "nesting-rules": true,
                "custom-media-queries": true,
                "media-queries-ranges": true
              }
            })
          ]
        }
      }
    ]
}
...