Как правильно вложить в js файл и css и шрифты?

Question

[GrimJack]

Пишу небольшой виджет на vue. Одно из требований - должен подключаться просто 1 js файл.
То есть. Вот есть у меня в компонентах разметка, используется свой шрифт и картинки. Картинки я перегнал в base64 и никаких проблем. А вот со стилями и шрифтами (которые в стилях вызываются. Уже проблема.
Пробовал так:

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

Не помогло.
Как все же правильно будет в данном случае подключить?
PS есть основной компонент и в нем хочу все подключить.
PPS я в этом деле новичок, потому прошу тапками не бросать

UPD
Используется не чистый webpack, а laravel mix
По сути задать конфиг могу через (исходя из доки)

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

Сам код:

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

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

Comments

[Сергей delphinpro]

ну стили по умолчанию вписываются в js файл, непонятно в чем проблема. может нужно убрать extract-text-plugin
а шрифты тоже можно в base64 перегнать

[Сергей delphinpro]

и для стилей scoped добавьте для изоляции

[Evgeny Kulakov]

Что у вас в конфиге вебпака?

[Дмитрий Беляев]

Сергей: scoped медленный (селекторы "тяжелые"), лучше модули

[GrimJack]

Сергей, Evgeny Kulakov , Дмитрий Беляев
scoped не помог, код приложил в апдейте

Answer 1

[Сергей Еремин]

Шрифты запечатываешь через base64:

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

CSS-ом, можно управлять через через DOM, а можно просто:

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