SASS变量名称被渲染出来而不是十六进制颜色

Question

Setup是一个带有Material-ui的React应用程序

我的SASS变量名称不起作用：

这里实际的变量名是试图渲染吗？

.login-hero {
  max-width: 460px;
  height: 400px;
  background-color: $cyan700;
  border: 1px solid black;
  border-radius: 8px 0px 0px 8px;
}

// Material UI colors
$cyan700: #0097A7;
$gray100: #F5F5F5;
$gray800: #424242;

// Elements
$body: #fff;

的package.json

"material-ui": "^0.19.2",
"react": "^15.5.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "1.13.2",

webpack中的基础对象

const base = {
  entry: [
    PATHS.app
  ],
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.css|\.scss$/, loader: 'style-loader!css-loader' }
    ]
  }
};

还有什么需要看的吗？或者其他人遇到这个问题？

Answer 1

我在_base之前导入我的_components.scss，其中包含颜色和sass mixin

/* Vendors */
@import "./vendors/normalize.scss";
@import "./vendors/reset.scss";

/* Modules */
@import "./modules/_base.scss";
@import "./modules/_inputs.scss";
@import "./modules/_buttons.scss";
@import "./modules/_svg.scss";
@import "./modules/_queries.scss";
@import "./modules/defaults.scss";

/* Components */
@import "./modules/_components.scss";

还更新并更正了我的配置到webpack 3