React-toolbox: Theme is not applied when importing a component

[delacruz-dev]

Hi!

I'm aware it might sound silly, but I was trying react-toolbox and I couldn't make it import styles. I've checked react-toolbox-examples and I think I'm doing mostly the same, but I can't see any difference that explains why I'm noot seeing styles in my imported component. This is what I'm doing:

import React from 'react'
import Button from 'react-toolbox/lib/Button'

export default () => (
  <div>
    <section style={{ padding: 20 }}>
      <Button label='Primary Button' />
    </section>
  </div>
)

And this is what I see:

It seems that CSS Modules is loading the styles:

And the generated HTML:

My webpack.config:

resolve: {
    extensions: ['', '.scss', '.css', '.js', '.jsx', '.json'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  },

  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel',
      exclude: path.resolve(__dirname, './node_modules')
    }, {
      test: /\.s?css$/,
      loader: 'style!css!sass!postcss'
    }, {
      test: /\.ejs$/,
      loader: 'ejs-loader'
    }]
  },

  postcss: [autoprefixer],

  sassLoader: {
    data: '@import "theme/_config.scss";',
    includePaths: [path.resolve(__dirname, './src/client')]
  },

The config in my custom theme:

@import "~react-toolbox/lib/colors";

$color-primary: $palette-blue-500;
$color-primary-dark: $palette-blue-700;

Please let me know if you need something else to identify the error... I know it may sound a silly question but I've spent some time already and I can't figure out what's going on :(

[jeffcharles]

Seeing the same thing except with the AppBar. The outer <header> tag of the component has an empty class attribute so none of the styling is applied.

[scrawfor]

I was having this issue as well. Changing my webpack config to this seems to have alleviated the issues.

var path = require('path');
var webpack = require('webpack');

var config = {
    devtool: 'inline-source-map',
    // devtool: 'eval-source-map',
    entry: [
        './src/app.js', 'webpack-hot-middleware/client'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    plugins: [new webpack.NoErrorsPlugin()],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel']
                // exclude: /node_modules/
            }, {
                test: /\.less$/,
                loaders: ["style", "css", "less"]
            }, {
                test: /\.scss$/,
                loader: 'style!css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap'
            }
        ]
    }
};

module.exports = config;

[delacruz-dev]

@scrawfor wow! That made the trick! I changed my scss loader with yours and also added postcss and it works:

loader: 'style!css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap'

I wonder if this should be in the documentation somewhere...º

[javivelasco]

It should be documented. What I miss in your posted config is the configuration parameter to enable css modules (which is modules in the css loader querystring) Glad it's fixed! :)