vuejs只导入一次css文件

我有一个很大的网页，有很多页面，4-6页我需要一个特定的css代码。我不想将这个css代码添加到全局文件中，而是我希望每当浏览页面的任何人时只加载一次相关特定文件。我试过这样的事情vuejs只导入一次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文件？

来源

2017-09-08 coure2011

在我看来，应该将每个页面拆分为单独的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>

来源

2017-09-08 05:15:26

vuejs只导入一次css文件

回答

相关问题