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

Posted 2023-03-06

【中文标题】从 Bulma SASS 中删除未使用的颜色

【英文标题】：Remove unused colors from Bulma SASS

【发布时间】：2020-10-07 22:39:31

【问题描述】：

我开始学习 Bulma 框架。我有一个问题-从 SASS 中删除未使用的颜色以减小最终 CSS 大小的正确方法是什么？默认情况下，Bulma 为大多数具有每种颜色的元素生成集合，在$colors 变量中定义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;

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

【问题讨论】：

我以前没用过，但我想只是删除定义“无用”颜色变量的代码行。

【参考方案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";