vuejs Importing css file only once

Question

I have a large site with a lot of page, for 4-6 pages I need a specific css code. I don't want to add this css code to global file, instead I want is to whenever anyone of the page is browesed load that related specific file only once. I tried something like this

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

Issue with this approach is that now I have multiple occurrences of same css code. Is there any way in the .vue file to import boxes.css file only if its already not imported?

Answer 1

It looks to me like you should split each page into a separate Vue component and then have the common styling in your root component and each page's specific rules declared in the component itself (with the scoped attribute set).

For example:

In your root component:

// 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>

In a page with specific styling rules:

// 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>