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.

@import "@/styles/_variables.scss"; @import "@/styles/_other.scss" — bcjohn
– bcjohn, Commented Apr 24, 2019 at 9:44
You can import other scss files in one main file and just import the main scss file — arora
– arora, Commented Apr 24, 2019 at 9:55

Jason · Accepted Answer · 2020-08-10 17:06:05Z

9

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";
        `
      }
    }
  }
};

answered Aug 10, 2020 at 17:06

Jason

2,6374 gold badges43 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KJParker · Accepted Answer · 2019-04-24 12:01:12Z

3

@import "@/styles/_variables.scss"; @import "@/styles/_other.scss"

Worked perfectly. But so did importing into one large file, and loading that.

answered Apr 24, 2019 at 12:01

KJParker

7802 gold badges10 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related