loading different css base on .env file on nuxt.config.js

Question

I am trying to load a different css base on my .env file because I have two - three types of application that has different designs.

my nuxt.config.js looks something like this

export default {
  mode: "spa",
  css: process.env.APP_TYPE == 1 ? ["~/assets/scss/app1.scss"] : ["~/assets/scss/app2.scss"]
}

I would like to load 2-3 different scss base on my .env file

Answer 1

Create a function before export statement in config that would return css-array. For example:

const getCss = () => {
  return process.env.APP_TYPE == 1 
   ? ["~/assets/scss/app1.scss"] 
   : ["~/assets/scss/app2.scss"]
}
export default {
  mode: "spa",
  css: getCss()
}