scss bootstrap 4覆盖映射答案

【问题标题】：scss bootstrap 4 overwrite mapscss bootstrap 4覆盖映射
【发布时间】：2019-03-27 09:34:57
【问题描述】：

我正在使用 Bootstrap 4 尝试使用 scss，但我不知道如何覆盖变量（使用映射）correclty

custom.scss

// Your variable overrides
$primary: rgb(40, 167, 36);

$spacer: 1;
$spacers: (
  0: 0,
  1: ($spacer * .2),
  2: ($spacer * 3),
  3: $spacer,
  4: ($spacer * 8),
  5: ($spacer * 12),
  6: ($spacer * 50)
);


// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

原色覆盖效果很好，但垫片不行。

现在看起来所有值都等于 0，每当我添加像“mt-5”这样的类时，它都不会改变任何东西。

我不知道我做错了什么。

【问题讨论】：

这篇文章可以帮到你：stackoverflow.com/questions/45776055/…
我按照它说的做了，但仍然没有工作，我在顶部添加了@import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; 但现在即使 $primary 覆盖也不起作用

标签： sass bootstrap-4

【解决方案1】：

以下是向地图添加间隔的方法。问题是spacer 没有单位。使用px 或rem 定义spacer 单位...

$spacer: 1rem;
$spacers: (
  0: 0,
  1: ($spacer * .2),
  2: ($spacer * 3),
  3: $spacer,
  4: ($spacer * 8),
  5: ($spacer * 12),
  6: ($spacer * 50)
);

https://www.codeply.com/go/TY8XqnvzO9

【讨论】：