joshuajansen / bulma-rails

351 stars 46 forks source link

How to override default color variables? #34

Closed fakefarm closed 6 years ago

fakefarm commented 6 years ago

Hello, would you be able to help me figure out how to override default variables in application.scss? I've tried a few simple examples inside application.scss to get proof of concept.

Attempt 1 doesn't work

// from the bulma customize page, but asset pipeline doesn't recognize
@import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions";

Attempt 2 doesn't work

@import "bulma";
$primary: red;

Attempt 3 hack

I suppose I could override the classes themselves but I'm hoping to be able to figure out where to customize the variables.

@import "bulma";

.is-primary {
  background: red !important;
}

Any suggestions?

Thanks!

fakefarm commented 6 years ago

Solved it. Solution was to just set variables before importing. Fair enough!

$primary: blue;
$warning: red;
@import "bulma";