title: Vue 2 Webpack 3 Bootstrap 4 scss customization
body: <p>In my vue 2 application, wanted to define media breakpoint like below</p>
  
  <pre><code>@include media-breakpoint-between(md, lg){
    body {
        background-color: red;
    }
  }
  </code></pre>
  
  <p>and hence forth imported in the vue file bootstrap.scss
  @import "~../../node_modules/bootstrap/scss/bootstrap.scss";</p>
  
  <p>But this above import failed error on npm run dev</p>
  
  <pre><code>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&amp;index=1&amp;bustCache!./client/App.vue
  Module build failed:
  undefined
         ^
        Argument `$map2` of `map-merge($map1, $map2)` must be a map
  </code></pre>
  
  <p>Any suggestions to resolve this issue</p>