使用 Bulma 设置新的主要字体系列答案

【问题标题】：Setting a new primary font-family with Bulma使用 Bulma 设置新的主要字体系列
【发布时间】：2020-10-24 11:39:26
【问题描述】：

我正在尝试更新 Bulma 中主要字体系列的变量，但似乎没有发生任何事情。到目前为止，我所做的是：

导入初始变量和函数文件。
使用 Google 字体导入我想要的字体
设置一个名为$family-serif: "Grandstander", serif;的新变量
将$family-primary 更新为等于$family-serif 的值；
使用@import "../assets/bulma/bulma.sass"; 导入布尔玛

源代码可以在https://github.com/jacobcollinsdev/eponym找到，我已经在下面包含了代码sn-ps：

@charset "utf-8";
@import url('../assets/bulma/sass/utilities/initial-variables.sass');
@import url('../assets/bulma/sass/utilities/functions.sass');

@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grandstander&display=swap');

$family-serif: "Grandstander", serif;
$family-primary: $family-serif;

@import "../assets/bulma/bulma.sass";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/styles.css">

    <title>Home | Eponym Mag</title>
</head>

我最近才开始使用 Bulma，我想我可能对需要包含的文件等有点混乱，感谢任何见解。

谢谢！

【问题讨论】：

标签： css bulma

【解决方案1】：

有点晚了，但是：在设置所有要自定义的变量后，您必须从 Bulma 导入所有需要的内容（这在 documentation 中提到过几次）。此外，还有使用node-sass、Sass CLI 和webpack 进行自定义的示例。

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grandstander&display=swap');

$family-serif: "Grandstander", serif;
$family-primary: $family-serif;

@import "../assets/bulma/sass/utilities/initial-variables.sass";
@import "../assets/bulma/sass/utilities/functions.sass";

【讨论】：