Webpack + React Support

I’m trying to use this package on a React app powered/bundled with webpack.

Through the following declaration in webpack, I’m able to generate a style.css file which appears to be working as the resulting css produces hashed names for classes…

        { test:    /\.css$/
        , loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
        , exclude: [/node_modules/]
        }

However, within a React component, a <p className={styles.element}>...</p> for example, does not inject the name of the css-module class ._element_1119m_1 for example.

Do you have any experience or knowledge of React compatibility?

[madyankin]

Yes, you have to use JSON files. You can write a Babel plugin which would transform imports.

[pruett]

It’s odd because a styles.css.json file is created in the same directory and shows the correct mapping, but console.log(styles) returns an empty object in the React render method.