Thursday, July 7, 2016

webpack + react-toolbox - CSS class names not loading

Scenario:
React-toolbox with webpack.


webpack command works without errors. Page loads without errors. But the css information on the html element is missing (empty).


The cause was this:

THIS DOES NOT WORK ( NO ERROR , BUT EMPTY CLASS PROPERTY ON THE RESULTING HTML ELEMENT:

module: {
    loaders: [
        {
            //tell webpack to use jsx-loader for all *.jsx files            test: /\.js$/,
                  loader: 'babel',
                    exclude:path.resolve(__dirname, 'node_modules/')

        },


        {
            test: /(\.scss|\.css)$/,
            loaders: ["style", "css", "sass"]
        },



    ]
},


THIS WORKS WELL:

module: {
    loaders: [
        {
            //tell webpack to use jsx-loader for all *.jsx files            test: /\.js$/,
                  loader: 'babel',
                    exclude:path.resolve(__dirname, 'node_modules/')

        },


        {
            test: /(\.scss|\.css)$/,
            loaders: ["style", "css?modules", "sass"]
        },



    ]
},

More details here:
https://github.com/react-toolbox/react-toolbox/issues/567
and here
https://github.com/webpack/css-loader#css-modules


To learn from this:

Always use the starter kit if possible, don't try your configuration for webpack.config.js file.

No comments:

Post a Comment

Ubuntu 12.04, 14.04, 16.04 - auto start an app or script before login

To run a command or application at startup, even before the user has logged in, you can use this file: /etc/rc.local The commands entered...