vuejs Importer un fichier css une seule fois

Question

J'ai un grand site avec beaucoup de pages, pour 4-6 pages j'ai besoin d'un code CSS spécifique. Je ne veux pas ajouter ce code CSS au fichier global, mais je veux que chaque fois que quelqu'un de la page est browesed charger ce fichier spécifique lié une seule fois. J'ai essayé quelque chose comme ça

..... 
//page 45 
<style> 
    @import '../../styles/boxes.css' 
</style> 
...... 
..... 
//page 46 
<style> 
    @import '../../styles/boxes.css' 
</style> 
...... 
..... 
//page 47 
<style> 
    @import '../../styles/boxes.css' 
</style> 
...... 
.... 

problème avec cette approche est que maintenant j'ai plusieurs occurrences de même code css. Est-il possible dans le fichier .vue d'importer le fichier boxes.css uniquement s'il n'est pas déjà importé?

Answer 1

Il me semble que vous devez diviser chaque page en une Vue component séparée et ensuite le style commun dans votre composant racine et des règles spécifiques de chaque page déclarée dans le composant lui-même (avec l'ensemble attribut scoped).

Par exemple:

Dans votre composant racine:

// App.vue 
<template> 
    <div id="app"> 
    <page1></page1> 
    <page2></page2> 
    ... 
    </div> 
</template> 

<script> 
import Page1 from './components/Page1' 
import Page2 from './components/Page2' 
... 

export default { 
    name: 'app', 
    components: { 
    Page1, 
    Page2, 
    ... 
    } 
} 
</script> 

<style> 
    // these rules are available globally 
    @import './assets/boxes.css' 
</style> 

Dans une page avec des règles de style spécifiques:

// Page1.vue 
<template> 
    <div> 
    <h1>Page 1</h1> 
    </div> 
</template> 

<style scoped> 
    // with the `scoped` attribute, these rules will only apply to this component 
    h1 { 
    color: red; 
    } 
</style>