Stile nur laden, wenn Komponente in Vue.js importiert wurde

Ich habe ein Vue.js-Projekt mit Vue UI mit Webpack-Projekt mit Router für mehrere "Seiten". Ich verwende SASS (SCSS) Partials und importiere sie in die einzelnen Komponenten.

<style lang="sass">
@import "@/css/modules/_style-guide.scss";
</style>

Auf jeder "Seite" wird das SASS (eigentlich das gerenderte CSS) für alle Komponenten in das DOM im Kopf geladen, auch wenn sie nicht in die "Seite" importiert werden.

Das Hinzufügen der Option „scoped" lädt weiterhin alle SASS-Dateien, fügt nur die eindeutige Guid hinzu.

Ich würde den SASS lieber nur importieren, wenn eine Komponente auf einer "Seite" vorhanden ist.

Gibt es eine Möglichkeit, dies zu tun?

Lösung des Problems

Sie müssen nicht nur scoped, sondern auch Lazy Loading für alle Ihre Komponenten implementieren.

Wenn du so importierst:

import vue from 'vue'
import MyComponent from '/where/it/is'
vue.component('my-component', MyComponent)

dann würdest du es ändern

import vue from 'vue'
const MyComponent = () => import(/* webpackChunkName: "unique-chunk-name" */ '/where/it/is')
vue.component('my-component', MyComponent)

Jetzt wird MyComponent verzögert geladen – es lädt seinen.js- und.css-Teil des Pakets nur dann vollständig, wenn es auf eine Seite geladen wird