javascript - 如果我想导入超过 1 个 CSS 文件，为什么多个 @import 在 Vue.js 元素中不起作用？

Question

我正在从事一个元素，其中我有一个组件和几个需要自定义 CSS 文件和一些额外的 vendor CSS 文件的子组件。问题是，我不能使用 @import "path/to/css/file.css"在 <style>..</style> 内多次我的 Vue 组件部分。

例如，下面给出的代码将起作用，它将成功导入 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 或任何其他语言。

Answer 1

使用多个@import 规则应该不会有任何问题。因为，由于某种原因它不适合你，你可以尝试将所有 @imports 放入一个 main.css 中，然后是其他样式规则。脚本、样式表和其他外部资源需要服务器通信并影响页面性能，因此最好尽可能减少外部文件的数量。