从 CDN 更改 Materialise 主题颜色答案

【问题标题】：Change Materialize theme colors from CDN从 CDN 更改 Materialise 主题颜色
【发布时间】：2020-04-02 19:34:09
【问题描述】：

我在一个项目中使用 Materialize，并且我必须使用 CDN 链接加载 Materialize。所以在我的项目标题中，我有：

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

我现在想更改项目主题颜色。

我知道通过使用 SASS，我可以在某处使用 _variables.sass 文件来更改默认值，但由于它是从 CDN 加载的，所以我不能这样做。

从 CDN 加载 Materialize 的正确方法是什么？

我试过了：

在我的项目主 CSS 文件中设置一个新变量：

$primary-color: red;
$primary-color-light: lighten($primary-color, 15%) !important;
$primary-color-dark: darken($primary-color, 15%) !important;

不工作。

将此变量设置为!important：

$primary-color: red !important;
$primary-color-light: lighten($primary-color, 15%) !important;
$primary-color-dark: darken($primary-color, 15%) !important;

不工作。

【问题讨论】：

标签： css materialize

【解决方案1】：

这里有两点：

1) 由于该 CDN 文件是以编译后的 CSS 而不是 SASS 的形式出现的，因此 SASS 变量不可编辑，因此您实际上不会用自己的 SASS 文件覆盖任何内容。

2) 通过访问此 CSS 文件，您应该可以使用它们的所有颜色类（例如：<div class="card-panel teal lighten-2">）。在我看来，这是在给定设置中使用此库的预期方式，因此您可以在整个项目中根据自己的喜好编辑 HTML 元素的类。

https://materializecss.com/color.html

【讨论】：