vite + vue3 动态加载 css

在使用Vite和Vue 3时，您可以通过动态加载CSS来实现按需加载样式。以下是一种实现方法：

1. 在Vue组件中，您可以使用`import`语句动态加载CSS文件。例如，假设您有一个名为`MyComponent.vue`的组件，您可以在需要的地方按需加载CSS文件。

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  mounted() {
    import('./path/to/your/css/file.css').then(() => {
      // CSS文件加载完成后的回调
      console.log('CSS loaded');
    });
  },
};
</script>

<style>
/* 组件样式 */
</style>

在`mounted`钩子函数中使用`import`语句来动态加载CSS文件。一旦CSS文件加载完成，您可以在回调函数中执行所需的操作。

2. 配置Vite以允许动态加载CSS。在您的Vite配置文件（例如`vite.config.js`）中，您可以添加`cssCodeSplit`选项来启用按需加载CSS。

export default {
  // 其他配置项
  cssCodeSplit: true,
};

这样配置后，Vite会将每个组件的样式分割成独立的CSS文件，并在需要时按需加载。

请注意，动态加载CSS会导致额外的网络请求和性能开销。因此，建议仅在需要时才使用动态加载CSS，并根据项目需求进行权衡。

希望这可以帮助您实现动态加载CSS的功能。如有其他疑问，请随时追问。