Question

我正在一个项目上使用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;

不起作用。

Answer 1

这里有两点：

1）由于该CDN文件是作为已编译的CSS而不是SASS来的，因此SASS变量不可编辑，因此您实际上不会用自己的SASS文件覆盖任何内容。

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

https://materializecss.com/color.html

从CDN更改Materialise主题颜色

1 个答案: