title: Setting global sass variables in a vue project
body: <p>I created a vue.config.js file to set some global sass variables (just like the <a href="https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders" rel="nofollow noreferrer">documentation</a> specifies), however when trying to access the variables in a component, I get an undefined error. Adding the same import statement manually in the component works, but somehow it's not being picked up from inside the vue.config.js file. I checked that I have node-sass and sass-loader installed and that the vue.config.js is in the project root (next to the package.json). What am I missing?</p>
  
  <pre><code>module.exports = {
      css: {
          loaderOptions: {
              sass: {
                  data: `
                      @import "@/assets/styles/_variables.scss";
                  `
              }
          }
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/O1MFA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O1MFA.png" alt="Folder structure"></a></p>