vue.config.js - Loading Multiple .scss files for global use

Question

I have three .scss files in my Vue project.

The main global one, which I have imported to my main app component. Then, the other two are ones that container variables, and with such cannot be important in the same way, as the variable cannot be found.

So, I created a vue.config.js file, and added -

module.exports = {
css: {
  loaderOptions: {
    sass: {
      data: `@import "@/styles/_variables.scss";`
    },
  }
}
};

The issue is, that imports my _variables.scss file, but I also want to import a _other.scss file (from the same folder).

I cannot figure out how to structure it for it to import and use both.

Answer 1

If you're using sass-loader 8 or above, you need to use prependData instead of data. For example:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/styles/_variables.scss";
          @import "@/styles/_variables2.scss";
        `
      }
    }
  }
};