How to include appropriate SCSS file?

Question

I'm using Vue and I have multiple stylesheets for different configuration. And I need to use only one of them (depending on the configuration).

I have config file with value type: "a", so that I need to include and use "a-setup.scss". I tried to include file in vue.config.js, but it doesn't support imports.

So the question is: what should I do to use certain scss file?

Answer 1

So, the solution I found is to use css additionalData prop inside the vue.config.js. Code:

const filename = process.env.VUE_APP_TEMPLATE;

const additionalData =
  ... +
  `@import "src/assets/styles/setup/${ filename }.scss";`;

module.exports = {
  css: {
    loaderOptions: {
      sass: { additionalData }
    }
  },
  ...
 }