React-toolbox how to include the styles correctly

Question

I am trying to use the date picker from react-toolbox.

Here is my webpack config:

    {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
    },{
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
    }

I have .scss in the resolve section:

resolve: {
    extensions: ['', '.js', '.jsx', '.scss']
},

I have also wrapped my App component within ToolboxAPP

ReactDOM.render(
    <ToolboxApp>
        <Provider store={store}>
            <App />
        </Provider>
    </ToolboxApp>
, document.getElementById('root'))

When I rendered the component, here is what it looks like:

You can see from the image that the component is not styled, and the corresponding css class names are undefined.

Does anybody know what i did wrong?

Answer 1

You need to include modules (which unfortunately may break any other styling not using modules).

See https://github.com/react-toolbox/react-toolbox/issues/121 for more info.

This is the line you will need to utilize in your webpack loader:

require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',