Vue 2 Webpack 3 Bootstrap 4 scss customization

Question

在我的vue 2应用程序中，想要定义媒体断点如下

@include media-breakpoint-between(md, lg){
  body {
      background-color: red;
  }
}

因此，在VUE文件bootstrap.scss中导入@Import" 〜../../node_modules/bootstrap/scss/bootstrap.scss";

但是，该上述输入失败的错误在NPM运行dev

ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-6a244a7e","scoped":false,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=1&bustCache!./client/App.vue
Module build failed:
undefined
       ^
      Argument `$map2` of `map-merge($map1, $map2)` must be a map

解决此问题的任何建议

Answer 1

我使用Bootstrap 4与材料设计图标遇到了类似的问题。事实证明，它是可变名称碰撞，并通过重新安排进口顺序解决了。

如果您提供了额外的错误输出和/或围绕引导程序导入的更多源，我可能会提供其他帮助。