title: How to add scss files to Vue project globally 2020
body: <p>I am trying to add global scss variables to my vue project.</p>
  <p>I found <a href="https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/" rel="nofollow noreferrer">here</a>(css tricks) and <a href="https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/" rel="nofollow noreferrer">here</a>(vue school) that what i have to do is to install sass-loader running <code>npm i node-sass sass-loader</code>in the command line.</p>
  <p>I also need in my project a <code>vue.config.js</code> file with the following :</p>
  <pre><code>module.exports = {
    css: {
      loaderOptions: {
        sass: {
          prependData: `@import &quot;@/styles/_variables.scss&quot;;`
        }
      }
    }
  };
  </code></pre>
  <p>where <code>_variables.scss</code> is the file that i want to import globally.</p>
  <p>When i run <code>npm run build</code> in my project i get this error :</p>
  <pre><code>Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: semicolons aren't allowed in the indented syntax.
    ╷
  1 │ @import &quot;@/styles/_variables.scss&quot;;
    │                                   ^
    ╵
  </code></pre>
  <p>If i erase the semicolon :</p>
  <pre><code>Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: expected &quot;;&quot;.
    ╷
  1 │ @import &quot;@/styles/_variables.scss&quot;
    │  
  </code></pre>
  <p>If found <a href="https://stackoverflow.com/questions/54158207/how-do-i-add-a-global-scss-file-in-vue-js-that-will-compile">this stackoverflow post</a> that says that depending on my sass-loader version i have to change the <code>prependData</code> to <code>data</code>, where prependData is for <code>&quot;sass-loader&quot;: &quot;^8.0.2&quot;</code> and <code>data</code> for <code>&quot;sass-loader&quot;: &quot;^7.*.*&quot;</code></p>
  <p>I think the problem is somewhere in here as my sass-loader version is 6.13.4 according to</p>
  <pre><code>npm sass-loader -v
  </code></pre>
  <p>When i run <code>npm update sass-loader</code> i don't recieve any message, but the version is still 6.13.4</p>
  <p>Accorging to <a href="https://www.npmjs.com/package/sass-loader" rel="nofollow noreferrer">npm</a> the latest sass-loader version is 9.0.2</p>
  <p>Does anyone know what am i doing wrong ?</p>
  <p>My repository is <a href="https://github.com/ignacioambia/tadoo" rel="nofollow noreferrer">here</a></p>