css - 为新颜色变量编译 materializeCSS 框架会出错

Question

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

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

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

1. 我已经添加了一个自定义文件 _customblue.scss 到 materialize-src\sass\components 代码可以在这篇文章的底部看到。

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

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

一旦我用 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;

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