How to properly embed both css and fonts in a js file?

Question

JavaScript

I am writing a small widget in vue. One of the requirements is that just 1 js file should be connected.
I.e. Here I have markup in the components, I use my own font and pictures. I overtook the pictures in base64 and no problems. But with styles and fonts (which are called in styles. Already a problem.
I tried it like this:

<style>
    @import "../../sass/app.scss";
</style>

Did not help.
How would it be correct to connect in this case?
PS There is a main component and I want to connect everything in it.
PPS I'm new to this business, so I ask you not to throw
UPD
with slippers. It's not pure webpack that is used, but laravel mix.
In fact, I can set the config through (based on the docks)

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
        ]
    }
});

The code itself:

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
    .version();

Answer 1

Fonts are sealed using base64:

@font-face {
  font-family: 'MyWebFont';
  src:
   url(data:application/x-font-woff;base64,КОД_ТВОЕГО_ШРИФТА==) format('woff'),
   ....
  }

CSS, can be controlled through the DOM, or you can simply:

document.getElementById("что-то").innerHTML="<style>твой-css</style>";