How to change value Bulma.io variables with Angular 8 - css

Question

I'm using Bulma.io in an Angular 8 project and I've install Bulma with this command: npm install bulma. After that I've included the styles in my angular.json file:
"styles": [
"src/styles.css",
"node_modules/bulma/css/bulma.css"
],
"stylePreprocessorOptions": {
"includePaths":
"node_modules",
"node_modules/bulma/sass/utilities"
]
},
I can work with Bulma but I can't override the variables to change, for instance, the background color of a navbar.
Here's my scss file that overrides the background-color of a navbar:
#import 'horizontal-navbar.component.css';
#import 'initial-variables';
#import "functions";
#import "bulma";
$navbar-background-color: #fff;
What am I doing wrong?
Thanks in advance.

Answer 1

We can import this as we do it with node sass
First save the bulma package
npm install bulma --save
then go to the style.scss and give the below code
// 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';
I took this example from https://bulma.io/documentation/customize/with-node-sass/