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代码。 .vue文件中是否有任何方法导入boxes.css文件，只有它已经导入？

Answer 1

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

例如：

在根组件中：

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>

vuejs只导入一次css文件

1 个答案: