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

【问题标题】：SASS variable name getting rendered out instead of hex colorSASS 变量名被渲染出来而不是十六进制颜色
【发布时间】：2017-09-21 18:50:28
【问题描述】：

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

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

【问题讨论】：

你没有在你的 webpack 配置中使用sass-loader。
@Prakashsharma 谢谢我错过了，但是我添加了它，现在遇到了这个：stackoverflow.com/questions/46351745/…

标签： reactjs sass material-ui

【解决方案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

【讨论】：