title: Use CSS Framework in every Vue Component with own variables
body: <p>I'm fairly new to the world of <code>VueJS</code> and <code>Webpack</code> so I need some help.</p>
  
  <p>I've installed <code>VueJS</code> and <code>Webpack</code> via the console with the command </p>
  
  <pre><code>vue init webpack my-project
  </code></pre>
  
  <p>and after this I've installed the <a href="http://bulma.io" rel="nofollow noreferrer">bulma CSS Framework</a> in this directory. with </p>
  
  <pre><code>npm install bulma
  </code></pre>
  
  <p>I've override some <code>bulma</code> variables in a <strong>variables.scss</strong>. If I import both files in the style section of my <strong>App.vue</strong> everything works fine.</p>
  
  <p>My <strong>App.vue</strong> looks like this:  </p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;top-navigation/&gt;
      &lt;div class="has-text-centered"&gt;
        &lt;img src="./assets/logo.png"&gt;
        &lt;p&gt;Test&lt;/p&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import TopNavigation from './components/shared/TopNavigation.vue'
  
    export default {
      name: 'app',
      components: {
        'top-navigation': TopNavigation
      }
    }
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
    @import 'assets/scss/_variables.scss';
    @import '~bulma';
  
  &lt;/style&gt;
  </code></pre>
  
  <p>My <strong>TopNavigation.vue</strong> looks like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class="blue-bg"&gt;
        &lt;div class="container"&gt;
          &lt;h2 class="title"&gt;Test&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
    export default {
      data () {
        return {
          msg: 'hello vue'
        }
      }
    }
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
    .blue-bg {
      height: 80px;
      background-color: $blue;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>But I get an error:</p>
  
  <blockquote>
    <p>error  in ./src/components/shared/TopNavigation.vue</p>
    
    <p>Module build failed:
        background-color: $blue;<br>
          Undefined variable: "$blue".</p>
  </blockquote>
  
  <hr>
  
  <p>I've searched a while and tried to import the files directly in my <code>webpack</code> <strong>utils.js</strong> file like this:</p>
  
  <pre><code>scss: generateLoaders(['css', 'sass?data=@import "./src/assets/scss/_variables.scss";@import "~bulma";']),
  </code></pre>
  
  <p>Now I don't get an error and in my <code>TopNavigation</code> is using the right blue color. But now the <code>bulma-variable</code> don't get override.</p>
  
  <p>I hope you guys understand my problem and someone can help me with this.</p>