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 } } }, ... }