Configuring react-toolbox sass variables with toolbox-loader

Question

I want to change the default value of $appbar-height variable.

I create toolbox-theme.scss file with

$appbar-height: 3 * $unit !default;

But I get a lot of errors:

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/app/style.scss
Module build failed: 
  top: 0;
                   ^
      Undefined variable: "$unit".
      in /home/jules/projects/tourbnb-frontend/node_modules/react-toolbox/lib/app/style.scss (line 3, column 21)
 @ ./~/react-toolbox/lib/app/style.scss 4:14-230 13:2-17:4 14:20-236

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/sass-loader?sourceMap!./~/toolbox-loader!./src/styles/styles.scss
Module build failed: 
undefined
                   ^
      Undefined variable: "$unit".
      in /home/jules/projects/tourbnb-frontend/src/styles/styles.scss (line 3, column 21)
 @ ./src/styles/styles.scss 4:14-261 13:2-17:4 14:20-267

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/sass-loader?sourceMap!./~/toolbox-loader!./src/components/header/style.scss
Module build failed: 
@import "~react-toolbox/lib/button/config";
                   ^
      Undefined variable: "$unit".
      in /home/jules/projects/tourbnb-frontend/src/components/header/style.scss (line 3, column 21)
 @ ./src/components/header/style.scss 4:14-269 13:2-17:4 14:20-275

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/button/style.scss
Module build failed: 
@import "./config";
                   ^
      Undefined variable: "$unit".
      in /home/jules/projects/tourbnb-frontend/node_modules/react-toolbox/lib/button/style.scss (line 3, column 21)
 @ ./~/react-toolbox/lib/button/style.scss 4:14-230 13:2-17:4 14:20-236

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/app_bar/style.scss
Module build failed: 

                   ^
      Undefined variable: "$unit".
      in /home/jules/projects/tourbnb-frontend/node_modules/react-toolbox/lib/app_bar/style.scss (line 3, column 21)
 @ ./~/react-toolbox/lib/app_bar/style.scss 4:14-230 13:2-17:4 14:20-236

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/ripple/style.scss
Module build failed: 

                   ^
      Undefined variable: "$unit".
      in /home/jules/projects/tourbnb-frontend/node_modules/react-toolbox/lib/ripple/style.scss (line 3, column 21)
 @ ./~/react-toolbox/lib/ripple/style.scss 4:14-230 13:2-17:4 14:20-236

If I change my config file to $color-primary-dark: $palette-blue-700 !default; it works all right and changes the color. How is $unit different from $palette-blue-700?

My webpack loader for styles:

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

Answer 1

toolbox-loader only imports the _colors.scss file (see first code line)

you have to import the _globals.scss file manually (or fork toolbox-loader).