覆盖一些 Bulma Sass 变量的问题 [英] Problem overriding some Bulma Sass variables

问题描述

我试图通过覆盖一些 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])但都没有成功.

解决方案

你的 bulma 导入已经导入了sass/utilities/_all"，所以这个 app.scss 对我来说很好用:

//布尔玛覆盖@import 'bulma_overrides';//布尔玛@import '~bulma/bulma';

I am trying to customize Bulma by overriding some Sass variables.

In my app.scss file I import the files using the following order:

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

The file bulma_overrides.scss includes the following:

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

My goal was to make the footer a little bit thinner, and I tried to achieve this by changing the padding from 3rem 1.5rem 6rem to 3rem 1.5rem 3rem. At the same time I am changing the backgroud color to whitesmoke.

After running and successfully building:

npm run watch

I reload the page.

Result:

The background color of the footer changes just fine but the padding does not.

At first, I thought that maybe this is not something we can customize, but the official documentation says that we can:

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

Any ideas why? By the way, I faced the same issue with another variable in a previous project, and I can't understand what is going on.

PS1: i am using Laravel 5.7 for this project. No changes are done in webpack.mix.js

PS2: i tried multiple browsers (Chrome, Firefox, Safari, Edge[lol]) but no luck.

解决方案

Your bulma import is already importing "sass/utilities/_all", so this app.scss worked for me just fine:

// Bulma Overrides
@import 'bulma_overrides';

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

这篇关于覆盖一些 Bulma Sass 变量的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！