Question

发布回溯的道歉，但我想知道是否有人可以帮我弄清楚这里有什么问题。

我正在使用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，据我所知最新的模块。

Answer 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＆＃34; map＆＃34;使用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);
}

应该对它进行排序。

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

1 个答案: