vuejs只导入一次css文件

Question

我有一个很大的网页很多的网站，对于4-6页我需要一个特定的css代码。我不想将这个css代码添加到全局文件中，而是只要页面中的任何人被浏览，就只加载一次相关的特定文件。我试过这样的东西

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

这种方法的问题是，现在我有多次出现相同的css代码。如果boxes.css文件还没有导入，.vue文件中有没有办法只导入它？

Answer 1

在我看来，您应该将每个页面拆分为一个单独的Vue component，然后在根组件中使用通用样式，并在组件本身中声明每个页面的特定规则(使用scoped属性集)。

例如：

在根组件中：

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

在具有特定样式规则的页面中：

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