Search code examples
angularsassbulma

Using Bulma scss variables in Angular, variables not changing

I've got Bulma scss in my Angular assets folder and then I'm importing it into my styles.scss

@import "./assets/bulma-scss/bulma.scss";

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

$primary: red !default;

body {
  padding: 50px;
}

Then I'm calling it from my html component:

<div class="container">
  <button class="button is-large is-primary">Test Button</button>
</div>

The result I'm expecting is for the button to be red but it's not changing color.

I'm I forgetting something?

Solution

  • For Angular CLI applications, all starting configuration happens in the .angular-cli.json file. In that file you'll find a styles array where we can add any CSS / SCSS files we want to add to our project. You'll also find a scripts array where you can add things if you need that.

    So ensure your angular-cli.json file has the styles.scss path referenced in your styles array.