在sass中使用react-css-modules不起作用

Question

I am trying to get react-css-modules 's to work whilst using sass but just can't get it working. I am following the documentation and it should just work at this point.

Scss include in jsx

import home from "../../scss/pages/_home.scss"

export default React.createClass({

    render() {
        return <app-content styleName={home.home}>
              }
         />
        </app-content>;
    }
})

webpack.config.js

        {test: /\.scss$/, loaders: [
            'style?sourceMap',
            'css?sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
            'resolve-url',
            'sass?sourceMap']},
        { test: /\.css$/, loader: "style-loader!css-loader?sourceMap&modules" },

Of course there are no js errors and the following gets output to my elements once compiled:

<app-content stylename="src-client-scss-pages-____home__home___JTSxY"></app-content>

But there just aren't any styles at all.

Answer 1

Urgh...

Ok, I thought about deleting the question but thought maybe if it could save somebody wasting 2 hours for such a stupidly simple thing why not post the answer:

    return <app-content class={home.home}>

The change being from styleName on the element with the style to the intuitive and obvious answer: class .

Good luck people!