使用 toolbox-loader 配置 react-toolbox sass 变量

Question

我想更改 $appbar-height 变量的默认值。

我用

创建工具箱-theme.scss 文件

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

但是我得到了很多错误:

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

如果我将配置文件更改为 $color-primary-dark: $palette-blue-700 !default;，它可以正常工作并更改颜色。 $unit 与 $palette-blue-700 有何不同？

我的样式 webpack 加载器：

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

Answer 1

toolbox-loader 仅导入 _colors.scss 文件（参见 first code line）

您必须手动导入 _globals.scss 文件（或 fork toolbox-loader）。

使用 toolbox-loader 配置 react-toolbox sass 变量

Configuring react-toolbox sass variables with toolbox-loader

javascript

sass

reactjs

webpack

react-toolbox