無法獲得Bootstrap v4.0.0-alpha5 Sass使用webpack進行編譯

Question

發佈backtrace的道歉，但我想知道有人能幫我弄清楚這裏有什麼問題。

我使用的WebPack嘗試編譯引導V4.0.0阿爾法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我自己的代碼，拉開序幕的問題，我用的是引導的make-row混入如下：

$has-gutter-width: 1rem; 

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

這不會對引導V4.0.0阿爾法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); 
} 

這應該排序。