在 scss 中更改 Material Design Lite 的主题颜色

Question

我通过 npm 安装了 material design lite 模块，但我想用其他颜色更改它，最好是 Material Design Color Pallete 中未包含的颜色。

我在这里阅读Here on GitHub how to do it。

但这对我不起作用，当我尝试更改颜色时，我得到 white/black 颜色外观。

我的主 scss 中有

@import 'colors';
@import '../../../node_modules/material-design-lite/src/material-design-lite'; `

我的 _colors.scss 包含：

$golden: #c6a259;
$brown: #240000;
$color-primary: #c6a259 !default;
$color-primary-dark: #c6a259 !default;
$color-accent: #240000 !default;
$color-primary-contrast: #240000 !default;
$color-accent-contrast: #240000 !default;

您可以在下图中看到差异（在我更改颜色变量值之前和之后）。

Answer 1

首先查看生成的 CSS。

尝试删除 !default。

并使用 RGB 颜色字符串："255, 0, 0"

例如以红色为主色。

 $color-primary: "255, 0, 0";