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?

Same here. But I do not even have those `undefined`, only empty `class` attribute. — Green, Feb 09 '16 at 02:55
Can you also add the line where you are instantiating the ExtractTextPlugin? — Jophin Joseph, Jun 27 '16 at 08:08

score 2 · Answer 1 · answered Dec 05 '15 at 23:50

2

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

answered Dec 05 '15 at 23:50

mattgi

712
1
7
11

I tried this line but it breaks my css for some reason. – Cheng Dec 06 '15 at 09:41
see the history in the GitHub issue, https://github.com/react-toolbox/react-toolbox/issues/121#issuecomment-162258230 – mattgi Dec 07 '15 at 11:44

score 0 · Answer 2 · answered Dec 01 '15 at 15:57

0

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!

answered Dec 01 '15 at 15:57

javivelasco

426
3
10

It imports styles on the page all right, it doesn't set classes. – Green Feb 09 '16 at 10:42
1

That webpack file is very confusing as someone who has a pretty simple webpack config file, a lot of the stuff in there doesn't seem specific to setting up for react-toolbox. – Alioo Feb 08 '17 at 22:57

score 0 · Answer 3 · edited Jan 06 '16 at 08:52

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" },
    ]
},

I had the similar problem and I have outlined steps to resolve the problem. 1. Is to make sure you install the correct loaders — oshaiken, Feb 14 '16 at 19:02

React-toolbox how to include the styles correctly

3 Answers3

Linked