使用SCSS覆盖Boolma中的初始变量

Question

我正在尝试覆盖布尔玛网页中的一些初始变量（准确地说是颜色）。我查看了Bulma的文档，并决定使用不需要使用npm进行安装的sass-CLI进行操作。

我下载了bulma-0.7.4.zip并将压缩文件夹的内容提取到我的项目文件夹中。然后，我创建了一个名为mystyles.scss的文件，并将其放入bulma-0.7.4文件夹中的SCSS文件夹中。我导入了默认的bulma.scss并将字符集设置为utf-8。

mystyles.scss：

@charset "utf-8";
@import "../bulma.sass";

对于第一次尝试，我尝试使用Bulma's website guide.上发布的摘录来完成所有操作。我很快发现，该指南过于草率，因此需要进行一些修改（主要是关于文件路径）。

放置在Bulma的默认SCSS文件夹中的最终mystyles.scss：

@charset "utf-8";
@import "../bulma.sass";

// Initial variables
$red: #d22727;
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Global variables that are derived from primary colors
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// Imports necesary for the elements
@import "utilities/_all.sass";
@import "base/_all.sass";
@import "elements/button.sass";
@import "elements/form.sass";

我将所需的所有内容粘贴到mystyles.scss，并使用以下命令将我的scss“编译”为css：

sass --sourcemap=none sass/mystyles.scss:css/mystyles.css

文件已“编译”，没有任何错误。我发现的问题是，大多数初始变量根本不会被覆盖（例如主变量和链接）。

预期结果：

实际结果（请参见主要按钮和链接）：

有人看到我在做什么错吗？谢谢！

Answer 1

好像我的代码中的某个地方有错字。我重写了scss文件的代码，现在它可以工作了：）