Vuepress与Vite相关问题：@import 语法无效

在 VuePress2 中，你在 index.scss 中通过 @import 导入网络 CSS 是无效的。你可能需要在 VuePress 配置的 head 选项中手动导入它们。

相关原因：

1. Sass 中通过 @import 导入 CSS 会被编译为标准的 CSS @import 语法；

2. CSS @import 语法仅在 CSS 文件开始生效；

3. 为了让用户样式具有更高优先级，我们会在主题和插件样式后导入用户样式；

4. 在 Vite 构建 VuePress2 App 的中，它会将所有样式压缩为单个 CSS 文件。

上述内容导致用户在 Sass 中的 CSS @import 导入出现在最终 CSS 文件的中间位置，进而无效。

TypeScript

import { defineUserConfig } from "vuepress";

export default defineUserConfig({
  head: [
    [
      "link",
      {
        rel: "stylesheet",
        href: "YOUR_CSS_URL",
      },
    ],
  ],

  // ...
});

JavaScript

export default {
  head: [
    [
      "link",
      {
        rel: "stylesheet",
        href: "YOUR_CSS_URL",
      },
    ],
  ],

  // ...
};