Generating multiple stylesheets

Is it possible to generate more than one stylesheet via vue.config.js? I’m looking to essentially generate a couple different themes based off of some SASS variables. The ideal approach is outlined below.

src/styles/_variables.scss:

$backgroundColor: purple !default;

src/styles/theme-1.scss:

$backgroundColor: tomato;

src/styles/theme-2.scss:

$backgroundColor: pink;

vue.config.js:

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

src/App.vue:

<template>
  <div class="some-class">Hello</div>
</template>

<style lang="scss">
.some-class {
  background-color: $backgroundColor;
}
</style>

I’m looking to compile a stylesheet per theme-[x].scss file when building the application where theme-1-hash.css includes .some-class { background-color: tomato; } and theme-2-hash.css includes .some-class { background-color: pink; }. Is something like this possible?

2 Likes

Hi Trevor,

I am solving the same issue right now, have you managed to find solution already?
:pray::pray::pray:

Ctibor