VueJS 2 application compiled to 1

Question

We are building an application using VueJS as frontend. But we're kind of merging 2 apps into one. On the e-commerce side that is visible to the public, we have an admin panel that our employees can use to add products, users, etc.

I would like to know the best way to design each part differently. On the e-commerce side we want to use 1 stylesheet (scss) and then another stylesheet for our admin panel. The problem we have is that when all compiles, both are added to both sides of the application. So, because our admin is loaded second, all of our color variables are displayed on the e-commerce public side of the application.

We have taken main.scss out of main.js and created main.scss and main-admin.scss, then we have imported these files into their respective page template files, which we think will bring these two File decoupling. But this doesn't work, any suggestions on the best way to achieve this?

Answer 1

You can dynamically import a stylesheet in a script tag like this:

sssccc