我正在一个项目中，其中有一个组件和几个子组件，这些子组件需要自定义CSS文件和一些额外的供应商CSS文件。问题是，我无法在Vue组件的@import "path/to/css/file.css"部分中多次使用<style>..</style>。
例如，下面给出的代码将起作用，它将成功导入css文件并将样式应用于使用上述选择器的元素。
<template>
<div class="wrapper">
<i class="fa fa-user"></i>
</div>
</template>
<script>
export default {
name: 'header-for-admin'
}
</script>
<style>
@import "/path/to/css/file.css"
</style>
但是下一个代码将不起作用，甚至不会导入任何CSS文件。所有样式都将损坏，我不知道为什么会这样。主要问题是，使用@import包含的单个CSS文件有效，但是我不能多次使用@import，因为一切都会中断。
<template>
<div class="wrapper">
<i class="fa fa-user"></i>
</div>
</template>
<script>
export default {
name: 'header-for-admin'
}
</script>
<style>
@import "/path/to/css/file.css"
@import "/path/to/another/css/file.css"
</style>
我正在考虑创建一个新的
main.css文件，在其中我将使用@import导入组件树需要的所有CSS文件。这是一个好主意吗？已解决：我忘了在
;语句的末尾放置@import。随Javascript流一起去了。这个故事的寓意，无论是javascript还是CSS或任何其他语言，都不要忘记添加;。 最佳答案
使用多个@import规则应该没有任何问题。由于它由于某种原因对您不起作用，因此您可以尝试将所有@imports放入一个main.css中，然后再放入其他样式规则。脚本，样式表和其他外部资源需要服务器通信并影响页面性能，因此始终尽可能减少外部文件的数量总是更好的选择。