title: How do I add a global scss file in Vue.JS that will compile?
body: <p>I am trying to import a scss file within my VueJS project, where it will then compile and thus be able to use with my project. However, I need some help, as at present it simply errors. Is there a way to do this? Please note, I am very new to VueJS so I'm just getting my head around the basics. </p>
  
  <p>I created a folder called scss within my src folder, which contains my main.scss file. Next in my Vue.JS I have the following code; </p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;Home&gt;&lt;/Home&gt;
      &lt;Primary&gt;&lt;/Primary&gt;
      &lt;Secondary&gt;&lt;/Secondary&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Home from './components/Home.vue'
  import Primary from './components/Primary.vue'
  import Secondary from './components/Secondary.vue'
  
  export default {
    name: 'app',
    components: {
      'Home': Home,
      'Primary': Primary,
      'Secondary': Secondary
    }
  }
  
  module.exports = {
    css: {
      loaderOptions: {
        sass: {
          data: `
            @import "@/scss/main.scss";
          `
        }
      }
    }
  };
  
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  #app {
      display:block;
  }
  &lt;/style&gt;
  </code></pre>