如何在 ember-cli-materialize 中定义二次色和重音色？

Question

我使用 ember 2.2 和 ember-cli-materialize 组件。 我的问题是，在 app/styles/app.scss 中我可以定义 $primary-color，但所有其他值都被忽略（如 $accent-color 或 $secondary-text-color）。

这是我的 app.scss:

@import 'components/color';

$primary-color-dark:   #212121;
$primary-color:        #212121; // only this line works
$primary-color-light:  #212121;
$accent-color:         #ff6f00;
$primary-text-color:   #ff6f00;
$secondary-text-color: #ff6f00;
$divider-color:        #B6B6B6;

@import 'components/variables';
@import 'materialize';
@import 'ember-cli-materialize';

Answer 1

您需要在导入 components/color:

之前定义这些变量

$primary-color-dark:   #212121;
$primary-color:        #212121; // only this line works
$primary-color-light:  #212121;
$accent-color:         #ff6f00;
$primary-text-color:   #ff6f00;
$secondary-text-color: #ff6f00;
$divider-color:        #B6B6B6;

@import 'components/color';
@import 'components/variables';
@import 'materialize';
@import 'ember-cli-materialize';

Answer 2

您在 SASS 文件中的顺序是正确的。如果您导航到：

，您可以找到可重写的变量列表：

bower_components/materialize/sass/components/_variables.scss