覆盖一些布尔马Sass变量的问题

Question

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

在我的 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 来实现。同时，我将背景色更改为烟熏色。

运行并成功构建后：

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';