为新的颜色变量编译 MaterializeCSS 框架会出错

Question

我正在尝试向MaterializeCSS框架添加新的调色板。

我下载了源代码并在我的计算机上安装了Sass。

以下是我为实现目标而遵循的步骤。

1. 我添加了一个自定义文件_customblue.scssmaterialize-srcsasscomponents代码可以在这篇文章的底部看到。

2. 我像这样@import "components/customblue";将其包含在materialize.scss文件中。我在导入任何变量文件之前导入了它。

3. 然后我根据自己的喜好编辑了_variables。我还将在这篇文章的 botom 中添加此代码块。

一旦我用sass materialize.scss materialize.css编译它，我就会得到以下输出：

WARNING: Unknown `customblue` - `base` in $colors.
components_color-variables.scss 368:3  color()
components_variables.scss 37:17        @import
materialize.scss 9:9                    root stylesheet
Error: $color: null is not a color.
$primary-color-light: lighten($primary-color, 15%) !default;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
components_variables.scss 38:23  @import
materialize.scss 9:9              root stylesheet

_customblue.scss：

$customblue: (
"base":       #002B48,
"lighten-5":  #f2faff,
"lighten-4":  #9dd7ff,
"lighten-3":  #48b5ff,
"lighten-2":  #0090f2,
"lighten-1":  #005e9d,
"darken-1":   #002137,
"darken-2":   #001726,
"darken-3":   #000d15,
"darken-4":   #000204
);

_variables.scss：

$primary-color: color("customblue", "base") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
$secondary-color: color("customblue", "lighten-2") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;

Answer 1

我居然发现我做错了什么！

我删除了之前制作的导入文件，而是现在将这些颜色放在_color-variables.scss中，然后在该文件的底部有一个数组，您必须在其中添加颜色。

$colors: (
"materialize-red": $materialize-red,
"customblue": $customblue,
.....
) !default;

我希望这对将来的某人有用。