Laravel9+Vue3项目中FullCalendar无法加载CSS求助

Vite与Webpack的CSS处理逻辑存在差异，FullCalendar依赖的自动CSS导入机制在Vite环境下无法正常触发，手动导入对应CSS即可解决样式异常问题，具体操作如下：

1. 手动导入FullCalendar核心及插件CSS #

在你的index.vue文件顶部，直接引入所需的FullCalendar样式文件：

<script setup>
// 导入FullCalendar JS模块
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

// 手动导入对应CSS文件
import '@fullcalendar/core/main.css'
import '@fullcalendar/daygrid/main.css'
import '@fullcalendar/interaction/main.css'
// 若使用了其他插件（如timeGrid），需同步导入对应CSS：
// import '@fullcalendar/timegrid/main.css'

// 后续日历初始化逻辑...
</script>

2. 确认Vite配置支持CSS处理 #

Laravel默认的Vite配置已支持CSS导入，若你有自定义配置，确保vite.config.js包含基础的CSS处理能力，示例配置如下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

若项目使用Tailwind等CSS框架，无需额外修改配置，框架不会覆盖FullCalendar的样式规则。

3. 清除缓存并重新构建资源 #

执行以下命令清除Vite缓存并重新编译：

# 生产环境构建
npm run build

# 开发环境重启服务
npm run dev

完成上述操作后，FullCalendar的样式即可正常加载，解决显示异常问题。

内容的提问来源于stack exchange，提问作者Felipe Resende Silva