title: How to use Bootstrap mixins in VueJS components
body: <p>I'm using vue-cli + bootstrap-vue. I can't figure out why and how bootstrap mixins not working at all despite I imported Bootstrap like this (in my main.js)</p>
  
  <pre><code> import 'bootstrap/scss/bootstrap-grid.scss'
   import 'bootstrap-vue/dist/bootstrap-vue.css' 
   Vue.use(BootstrapVue);
  </code></pre>
  
  <p>And trying to use some mixins <strong>inside component</strong> </p>
  
  <pre><code>&lt;style lang="scss" scoped&gt;
      .xxx {
          @include media-breakpoint-up(md) {
              display: none;
          }
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>But if I import missing files everything will be fine:</p>
  
  <pre><code>&lt;style lang="scss" scoped&gt;
      @import "~bootstrap/scss/functions";
      @import "~bootstrap/scss/variables";
      @import "~bootstrap/scss/mixins";
  
      .xxx {
          @include media-breakpoint-up(md) {
              display: none;
          }
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>How to avoid importing these file in every component?</p>