Question

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

我使用

创建toolbox-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变量

1 个答案: