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'
}

And where is `$unit` defined? You can't use it if it hasn't been defined yet. — cimmanon, Feb 07 '16 at 16:33
it's defined [here](https://github.com/react-toolbox/react-toolbox/blob/dev/components/_globals.scss) Why I can reference `$palette-blue-700` that is defined [here](https://github.com/react-toolbox/react-toolbox/blob/dev/components/_colors.scss) but not `$unit`? — Július Retzer, Feb 07 '16 at 16:36

score 2 · Accepted Answer · answered Feb 07 '16 at 16:35

2

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).

answered Feb 07 '16 at 16:35

anton

168
1
11

1

Yes, `@import "~react-toolbox/lib/_globals";` worked, thanks. However I wasn't able to overwrite `$appbar-height` :-/ – Július Retzer Feb 07 '16 at 16:50
Did you try without `!default`? ;) – anton Feb 07 '16 at 17:00
Yes, it still doesn't work. I put `!deafult` there because that's how they do it in the [sample app](https://github.com/react-toolbox/react-toolbox-example/blob/master/app/toolbox-theme.scss) – Július Retzer Feb 07 '16 at 17:14
As I see [here](https://github.com/react-toolbox/react-toolbox/blob/dev/components/app_bar/_config.scss#L4) the height isn't ment to be overriden (missing !default flag). Same advice here - fork, test & send a pull request (I'm not a maintainer of the project, nor a user ;) ) – anton Feb 07 '16 at 18:17
I just created a pull request [#301](https://github.com/react-toolbox/react-toolbox/pull/301) hope you can use this soon ;) – anton Feb 07 '16 at 18:59

Configuring react-toolbox sass variables with toolbox-loader

1 Answers1