React-toolbox how to include the styles correctly

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?

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]',

It looks like a Webpack config issue. It is actually weird because if webpack is not able to import the styles it should raise an import error instead of resolving an empty object. Since we cannot see the whole configuration file, I'd like to ask you if you already checked the working example repository: https://github.com/react-toolbox/react-toolbox-example

There is an example Webpack configuration, hope it helps!

oshaiken

its clear that webpack does not see the css/scss files, do you have any errors, if you look into that you will find the problem.

problem might be that you need to install the css-loader and sass loader

npm install css-loader --save-dev
npm install sass-loader node-sass webpack --save-dev

if you have done that try to resolve

resolve: {extensions: ['', '.jsx', '.scss', '.js', '.json'],
    modulesDirectories: [
        'node_modules',
        ${process.cwd()}/node_modules
    ]
},

module: {
    loaders: [
        {
            test: /(\.js|\.jsx)$/,
            exclude: /(node_modules)/,
            loader: 'babel',
        },  {
            test: /(\.scss|\.css)$/,
            loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'),
        },
        { test: /\.png$/, loader: "url-loader?limit=100000" },
        { test: /\.jpg$/, loader: "file-loader" },
    ]
},

来源：https://stackoverflow.com/questions/34000626/react-toolbox-how-to-include-the-styles-correctly

标签

reactjs

react-toolbox