如何使用 Angular 8 更改 Bulma.io 变量的值答案

【问题标题】：How to change value Bulma.io variables with Angular 8如何使用 Angular 8 更改 Bulma.io 变量的值
【发布时间】：2019-08-13 15:39:13
【问题描述】：

我在Angular 8 项目中使用Bulma.io，并且我已经使用以下命令安装了Bulma：npm install bulma。之后，我将样式包含在我的 angular.json 文件中：

"styles": [
   "src/styles.css",
   "node_modules/bulma/css/bulma.css"
   ],
   "stylePreprocessorOptions": {
   "includePaths":
         "node_modules",
          "node_modules/bulma/sass/utilities"
   ]
   },

我可以使用Bulma，但我不能覆盖变量来更改，例如navbar 的背景颜色。这是我的scss 文件，它覆盖了navbar 的background-color：

@import 'horizontal-navbar.component.css';
@import 'initial-variables';
@import "functions";
@import "bulma";

$navbar-background-color: #fff;

我做错了什么？提前致谢。

【问题讨论】：

这里有同样的问题。你找到解决办法了吗？
它在文档中说要在导入 bulma 之前设置覆盖 - bulma.io/documentation/customize/variables

标签： css angular bulma

【解决方案1】：

我们可以像使用 node sass 一样导入它

先保存bulma包

npm install bulma --save

然后转到style.scss 并提供以下代码

// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Update Bulma's global variables
$family-sans-serif: 'Nunito', sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
// $body-background-color: $beige-lighter;
$body-background-color: #fff;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// Import only what you need from Bulma
@import '~node_modules/bulma/sass/utilities/_all';
@import '~node_modules/bulma/sass/base/_all';
@import '~node_modules/bulma/sass/elements/button';
@import '~node_modules/bulma/sass/elements/container';
@import '~node_modules/bulma/sass/elements/title';
@import '~node_modules/bulma/sass/form/_all';
@import '~node_modules/bulma/sass/components/navbar';
@import '~node_modules/bulma/sass/layout/hero';
@import '~node_modules/bulma/sass/layout/section';

这个例子来自https://bulma.io/documentation/customize/with-node-sass/

【讨论】：