vue3 中的@import

在 Vue3 中，`@import`并不是Vue本身的一种指令或语法特性，它是CSS预处理器（如Sass、Less等）中的一个语法，用于从外部引入样式文件。如果你在Vue项目中使用了像Sass这样的预处理器，那么在`.scss`或`.less`文件中，你可以通过`@import`指令导入其他CSS或Sass文件，将其内容包含到当前文件中，提高代码组织和复用性。

例如，在Sass中，你可能会这样做：

// main.scss
@import 'variables'; // 导入变量文件
@import 'mixins'; // 导入混合函数

body {
  @include background-color(); // 使用导入的混合函数设置背景色
}

然后在Vue组件的`style`标签内引用`main.scss`：

<template>
  <!-- ... -->
</template>

<script>
export default {
  // ...
};
</script>

<style lang="scss" scoped>
@import '@/styles/main.scss';
</style>

这里`lang="scss"`表示使用Sass语言解析样式，`scoped`属性则告诉Vue将样式作用于当前组件内部。