Remove unused colors from Bulma SASS

Question

I'm starting learning Bulma framework. I have a question - what is a correct way to remove unused colors from SASS to decrease final CSS size? By default, Bulma generate set for most elements with every color, defined in $colors variable in sass/utilities/derived-variables.scss

$colors: mergeColorMaps(
(
  "white"  : ($white, $black),
  "black"  : ($black, $white),
  "light"  : ($light, $light-invert),
  "dark"   : ($dark, $dark-invert),
  "primary": ($primary, $primary-invert, $primary-light, $primary-dark),
  "link"   : ($link, $link-invert, $link-light, $link-dark),
  "info"   : ($info, $info-invert, $info-light, $info-dark),
  "success": ($success, $success-invert, $success-light, $success-dark),
  "warning": ($warning, $warning-invert, $warning-light, $warning-dark),
  "danger" : ($danger, $danger-invert, $danger-light, $danger-dark)),
  $custom-colors
) !default;

If I using just 2-3 colors, I can decrease my final CSS to 30-40% just removing unused colors. Is it good practice to edit sass/utilities/derived-variables.scss directly or there is more flexible way to do this?

Answer 1

Make a custom.scss file in your bulma folder (if you don't already have one). Then import sass/utilities/derived-variables, set $colors to include only the colors you want and import the rest of bulma. Then use scss to compile the scss file into a css file.

custom.scss should look something like the following...

@charset "utf-8";
@import "sass/utilities/derived-variables";
$colors: mergeColorMaps(
    (
        "white": ($white, $black),
        "black": ($black, $white)
    ), 
    $custom-colors
);
@import "bulma";