title: Using sass variables in a VueJS component
body: <p>I got a rather simple problem with a VueJS component that needs to use a variable. The problem comes with getting sass to register variables inside a component.</p>
  
  <p>I tried importing the <code>_variables.scss</code> file containing my variables but to no luck. At this point any guidance is very much appreciated, or if there is another way for a component to inherit styling.</p>
  
  <h3>MyComponent.vue</h3>
  
  <pre><code>&lt;template&gt;
      &lt;div class="my-color"&gt;&lt;/div&gt;
  &lt;/template&gt;
  &lt;style lang="sass"&gt;
      .my-color {
          color: $primary-color;
      }
  &lt;/style&gt;
  &lt;script&gt;
      export default{
          data(){
              return {}
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <h3>Gulpfile.js</h3>
  
  <pre><code>var elixir = require('laravel-elixir');
  require('laravel-elixir-vueify');
  
  elixir(function(mix) {
      mix.browserify('main.js');
      mix.sass('app.scss');
  });
  </code></pre>
  
  <h3>app.scss</h3>
  
  <pre><code>@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
  @import "modules/variables";
  </code></pre>
  
  <h3>variables.scss</h3>
  
  <pre><code>$primary-color: #BA2731; //Red
  </code></pre>