react-toolbox: css could not work with webpack.

Hi all,

I meet a problem when I use webpack to build my react app:

  [279] ./~/react-toolbox/lib/button/theme.css 879 bytes {0} [built] [1 error]

ERROR in ./~/css-loader!./~/react-toolbox/lib/button/theme.css
Module build failed: Error: composition is only allowed when selector is single :local class name not in ".raised", ".raised" is weird
    at /home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss-modules-scope/lib/index.js:26:13
    at Array.map (native)
    at getSingleLocalNamesForComposes (/home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss-modules-scope/lib/index.js:20:26)
    at /home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss-modules-scope/lib/index.js:106:26
    at /home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss/lib/container.js:198:28
    at /home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss/lib/container.js:148:26
    at Rule.each (/home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss/lib/container.js:114:22)
    at Rule.walk (/home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss/lib/container.js:147:21)
    at Rule.walkDecls (/home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss/lib/container.js:196:25)
    at /home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss-modules-scope/lib/index.js:105:12
    at /home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss/lib/container.js:241:28
    at /home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss/lib/container.js:148:26
    at Root.each (/home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss/lib/container.js:114:22)
    at Root.walk (/home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss/lib/container.js:147:21)
    at Root.walkRules (/home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss/lib/container.js:239:25)
    at /home/xulei/MyWorkSpaces/react_toolbox/node_modules/css-loader/node_modules/postcss-modules-scope/lib/index.js:101:9
 @ ./~/react-toolbox/lib/button/theme.css 4:14-69

here is my webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: `${__dirname}/public/index.html`,
  filename: 'index.html',
  inject: 'body',
});

module.exports = {
  entry: './src/Main.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.less$/,
      loader: 'style-loader!css-loader!less-loader'
    }, {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }, {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        "presets": ["es2015", "react", "stage-1"]
      }
    },{
        test: /\.scss$/,
        include: [
          /node_modules\/react-toolbox/,
        ],
        loader: 'style-loader!css-loader!sass-loader'
      }]
  },
  devServer: {
    inline: true,
    port: 8000,
  },
  plugins: [HTMLWebpackPluginConfig],
};

I’m not very good at front-end stack, and I googled this error message but nothing works for me, could anyone told me how to fix this problem ?

Thanks.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 17 (2 by maintainers)

Most upvoted comments

Thank You guys! It’s working for me!

For reference, I follow this steps:

Install react-toolbox from npm: npm install react-toolbox@2.0.0-beta.4
Update the loader on my webpack config responsible for css files:

/* from this: */

module: {
    loaders: [
        {
            test: /\.css$/,
            loader: 'style!css?importLoaders=1!postcss'
        }
    ]
}

/* to this: */

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

After that two steps React Toolbox is already working (You can use as showed here ), but They assume You have Material Design Icons configured in your project. There are two ways to configure it, the simplest way is add a <link> tag in your index.html:

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

willianribeiro on Dec 19, 2016

@javivelasco coooool example !!!

BrickXu on Dec 19, 2016

This is a classic. You need to add configuration parameters for css modules. Please check the example repository. Also, I encourage you all to migrate to the PostCSS version. It’s still labeled as a beta and there are some breaking changes like Table and Layout but it’s going to be merged soon. Recall you don’t need webpack anymore if you don’t want it or you find it troublesome:

react-toolbox-themr

Check react-toolbox-themr. I’m publishing a migration guide soon

javivelasco on Dec 19, 2016