ブートストラップv4.0.0-alpha5がwebpackを使用してコンパイルするためにSassを取得できない

Question

バックトレースを投稿することについて申し訳ありませんが、

私はしかし、それは次のエラーで失敗しているブートストラップv4.0.0アルファ5を試してみて、コンパイルするのWebPACKを使用しています：バックトレースの

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で自分のコードを見てみると、以下のように、私はブートストラップのmake-rowミックスインを使用していました：

$has-gutter-width: 1rem; 

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

これはあなたが合格する必要があるブートストラップv4.0.0アルファ5上では動作しません。以前のバージョンのBootstrapにあったような単一の値ではなく、それが動作するためのmixinへのSass "マップ"。

このマップは、異なるブレークポイントのガター幅を設定するキーと値のペアのセットです。簡単にするために、私はそれぞれの同じ値にガター幅を設定しますが、あなたが行くようにあなたはそれを変更することができます。

$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); 
} 

それを並べ替える必要があること。