无法让 Bootstrap v4.0.0-alpha5 Sass 使用 webpack 进行编译

【问题标题】：Can't get Bootstrap v4.0.0-alpha5 Sass to compile using webpack无法让 Bootstrap v4.0.0-alpha5 Sass 使用 webpack 进行编译
【发布时间】：2017-04-30 10:08:06
【问题描述】：

很抱歉发布回溯，但我想知道是否有人可以帮助我找出这里出了什么问题。

我正在使用 webpack 尝试编译 Bootstrap v4.0.0 alpha 5。但是，它失败并出现以下错误：

ERROR in ./styles/main.scss
Module build failed: ModuleBuildError: Module build failed: 
  @each $breakpoint in map-keys($gutters) {
                      ^
      Argument `$map` of `map-keys($map)` must be a map

Backtrace:
    node_modules/bootstrap/scss/mixins/_grid.scss:50, in function `map-keys`
    node_modules/bootstrap/scss/mixins/_grid.scss:50, in mixin `make-row`
    assets/styles/common/_global.scss:15
      in /Library/WebServer/Documents/myproject/wp-content/themes/mytheme/node_modules/bootstrap/scss/mixins/_grid.scss (line 50, column 24)
...

没有显示其余的回溯。

据我所知，我正在使用最新的一切 - 节点 6.9.2、npm 4.0.3、最新的模块。

【问题讨论】：

标签： twitter-bootstrap npm sass

【解决方案1】：

查看我自己在_global.scss 中引发问题的代码，我使用的是Bootstrap 的make-row mixin，如下所示：

$has-gutter-width: 1rem;

.row.has-gutter {
    @include make-row($has-gutter-width);
}

这在 Bootstrap v4.0.0 alpha 5 上不起作用。您需要将 Sass“映射”传递给 mixin 以使其工作，而不是像以前在 Bootstrap 的早期版本中那样使用单个值。

此映射是一组键值对，用于设置不同断点的间距宽度。为简单起见，我将每个装订线宽度设置为相同的值，但您可以随时更改：

$gutter: 1rem;

$has-gutter-width-map: (
  xs: $gutter,
  sm: $gutter,
  md: $gutter,
  lg: $gutter,
  xl: $gutter
)

.row.has-gutter {
    @include make-row($has-gutter-width-map);
}

这应该对它进行排序。

【讨论】：