如何扩展变量'；什么是SCSS中的地图？

我正在使用一个名为Buefy的包，它是Bulma CSS框架库的Vue.js包装器。Buefy在其名为

type

的模板组件上放置一个属性/属性（例如，

type=“is warning”

）。根据，术语“是警告”是根据SCSS中设置的

$colors

变量预定义的：

因此，我可以自定义

$colors

映射，但我想做的是将这些说明中定义的初始SCS保留在单个

base.SCSS

文件中，然后使用我自己的自定义SCS文件进行扩展

我已将

base.scss

文件包括在我的Vue项目中，

Vue.config.js

文件中包含以下代码片段：

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

因此，我的问题是，如何使用自己的名称和值扩展

base.scss

中的

$colors

映射

这是

base.scss

中的一个片段，其中定义了

$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

映射以保持原始映射不变？我没有看到在中显示的任何解决方案。

您的自定义颜色值将放在一个变量中（稍后合并到

$colors

）名为

$custom colors

，它实际上在上的文档中有描述

要定制它，请执行以下操作：

// 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";

---

它在内部使用了一个名为的自定义函数。

希望这对您有用@kris我不明白这是如何解释如何扩展

$colors

映射的，或者我所描述的是什么样的替代模式。Vue.js的

.Vue

文件有

部分，并且scss代码是自动编译的。谢谢您的回答。但是，这也需要我在

base.scss

中定义我的

$custom colors

。有没有办法让

base.scss

保持原样？理想情况下，我希望在

App.vue

中定义

$custom colors

（如果您熟悉vue.js）。但是如果这不可能，那么我想我需要导入到

base.css

中，用于创建自定义定义的

myStyles.scss

？@Raj您不必在那里重新定义变量。如果您按照上面显示的

导入

s的顺序（以及在文档中），您应该能够在其他地方定义此

$custom colors

，并在Bulma样式之前导入它，是，在将

base.scss

导入到

App.vue

或您的输入文件之前导入

myStyles.scss

。我刚刚尝试设置

$custom colors

，但除非改为命名变量

$colors

，否则它永远不会工作。是因为Buefy使用的是Bulma的0.7.5版吗？@Raj Word。它在这里有明确的定义。您是否能够创建一个可复制的示例（JSFIDLE或codesandbox）来说明它如何不能为您呈现正确的结果？