覆盖一些 Bulma Sass 变量的问题

Question

我正在尝试通过覆盖一些 Sass 变量来自定义 Bulma。

在我的 app.scss 文件中，我使用以下顺序导入文件：

@import 'node_modules/bulma/sass/utilities/initial-variables';
@import 'node_modules/bulma/sass/utilities/functions';
@import 'bulma_overrides';
@import 'node_modules/bulma/bulma';

文件 bulma_overrides.scss 包括以下内容：

$footer-padding: 3rem 1.5rem 3rem;
$footer-background-color: whitesmoke;

我的目标是让页脚更细一些，我尝试通过将内边距从 3rem 1.5rem 6rem 更改为 3rem 1.5rem 3rem 来实现这一目标。同时，我将背景颜色更改为 whitesmoke。

运行并成功构建后：

npm run watch

我重新加载页面。

结果：

页脚的背景颜色改变得很好，但填充没有。

一开始我以为这可能不是我们可以定制的，但是官方文档说我们可以：

https://bulma.io/documentation/layout/footer/

任何想法为什么？顺便说一句，我在以前的项目中遇到了另一个变量的相同问题，我不明白发生了什么。

PS1：我在这个项目中使用 Laravel 5.7。 webpack.mix.js

中未进行任何更改

PS2：我尝试了多种浏览器（Chrome、Firefox、Safari、Edge[lol]），但都没有成功。

Answer 1

您的 bulma 导入已经在导入“sass/utilities/_all”，所以这个 app.scss 对我很有效：

// Bulma Overrides
@import 'bulma_overrides';

// Bulma
@import '~bulma/bulma';