如何在 SCSS 中扩展变量的映射？

Question

我正在使用一个名为 Buefy 的包，它是 Bulma CSS 框架库的 Vue.js 包装器。 Buefy 在其模板组件上放置了一个名为 type 的属性/属性（例如，type="is-warning"）。根据Buefy documentation，术语“is-warning”是根据 SCSS 中设置的$colors 变量预定义的：

所以我按照these instructions from Buefy 来自定义$colors 映射，但是我想做的是将这些指令中定义的初始SCSS 保留在单个base.scss 文件中，然后使用我自己定制的 SCSS 文件进行扩展。

我已将base.scss 文件包含在我的Vue 项目中，并在vue.config.js 文件中包含以下sn-p：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/scss/base.scss";
        `
      }
    }
  }
}

所以我的问题是，如何使用自己的名称和值扩展 base.scss 中的 $colors 映射？

这是来自 base.scss 的 sn-p，其中定义了 $colors 映射：

```css
$colors: (
  "white": ($white, $black),
  "black": ($black, $white),
  "light": ($light, $light-invert),
  "dark": ($dark, $dark-invert),
  "primary": ($primary, $primary-invert),
  "info": ($info, $info-invert),
  "success": ($success, $success-invert),
  "warning": ($warning, $warning-invert),
  "danger": ($danger, $danger-invert),
  "twitter": ($twitter, $twitter-invert)
);
```

所以，我的问题再次是如何在base.scss（可能在App.vue）之外的不同文件中扩展$colors 映射以保持原始不变？我没有'在scss docs 中看不到任何解决方案。

Answer 1

您的自定义颜色值将放入一个名为 $custom-colors 的变量（后来合并到 $colors）中，它实际上在 "derived variables" 上的文档中有所描述。

并对其进行自定义：

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$custom-colors: (
  "facebook": ($blue, $white),
  "linkedin": ($dark-blue, $white)
  // etc.
);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
  "white": ($white, $black),
  "black": ($black, $white),
  "light": ($light, $light-invert),
  "dark": ($dark, $dark-invert),
  "primary": ($primary, $primary-invert),
  "info": ($info, $info-invert),
  "success": ($success, $success-invert),
  "warning": ($warning, $warning-invert),
  "danger": ($danger, $danger-invert),
  "twitter": ($twitter, $twitter-invert)
);

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

它在内部使用名为mergeColorMaps 的自定义函数。