bulma - 从 Bulma SASS 中删除未使用的颜色

Question

我开始学习 Bulma 框架。我有一个问题 - 从 SASS 中删除未使用的颜色以减小最终 CSS 大小的正确方法是什么？默认情况下，Bulma 为大多数元素生成每种颜色的集合，在 sass/utilities/derived-variables.scss

的 $colors 变量中定义

$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;

如果我只使用 2-3 种颜色，我可以将最终 CSS 减少到 30-40%，只需删除未使用的颜色。直接编辑 sass/utilities/derived-variables.scss 是好的做法还是有更灵活的方法来执行此操作？

Answer 1

在你的 bulma 文件夹中创建一个 custom.scss 文件(如果你还没有的话)。然后导入 sass/utilities/derived-variables，设置 $colors 只包含你想要的颜色并导入 bulma 的其余部分。然后使用 scss将scss文件编译成css文件。

custom.scss 应该如下所示...

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