Vue Plugin Development - Importing SCSS Globally

Question

I'm working on a Vue Plugin and I'm trying to import and use a SCSS file (which in turn contains a bunch of other SCSS imports inside). So I'd ideally want to import and inject the SCSS file globally for the plugin.

I've tried the following methods (and they don't work):

1. Using vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "@/assets/scss/main.scss";`,
            },
        },
    },
}

This method does not bundle the styles when the plugin is built. None of the stylings are preserved on the build.

2. Just importing it in the plugin module

import MyComponent from "./plugin/MyComponent.vue";
import "./assets/main.scss"; // Tried it here

export default {
    install: (app: any): void => {
        require("./assets/main.scss"); // And here as well
        app.component("my-component", MyComponent);
    },
};

This approach doesn't work as well, even during direct plugin injection while development.

3. Importing in Plugin Components

I imported the SCSS file in every individual component that's being used in the plugin. For example in MyComponent.vue, I can use:

<template>...</template>
<style>
@import "../assets/main.scss";
</style>

In this case also it didn't work.

What is the right way of importing a SCSS file globally and making it work in a plugin?

Edit:

In the installed plugin, I can see that there's a CSS file packaged, but I'm not sure why it's not being applied. The class names are also there with all font imports and stuff. But it's not being applied.