VueJS 2 Apps compiled in 1

Question

We are building an app using VueJS as our front end. But we sort of have 2 apps in one. The ecommerce side that the public sees, then we have a admin panel that our employees can use to add products, users, etc.

I am wondering the best way to style each of these sections differently. The ecommerce side we want to use 1 stylesheet (scss) and then our admin panel use another stylesheet. The problem we are running into is that when it all compiles both are added to both sides of the app. So because our admin is loaded second all of our color variables are show on the ecommerce public side of the app.

We have pulled the main.scss out of main.js and created main.scss & main-admin.scss, we are then importing these files into their respective page-template files which we though was going to deouple the 2. But that isnt working, any suggestion on the best way to accomplish this?

Answer 1

You can import your stylesheets dynamically in the script tag like this:

<script setup>
import { ref, watchEffect } from "vue";

const theme = ref(2);

watchEffect(() => {
  import(`./assets/base${theme.value}.css`);
});
</script>