在Rails7+React项目中引入FullCalendar触发application.css的DoubleLinkError

问题背景 #

我有一个基于Ruby on Rails 7搭建的React项目，目前正处于添加React Router以支持多页面的阶段。执行yarn add @fullcalendar/react @fullcalendar/daygrid安装FullCalendar相关依赖，并创建了如下组件：

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

const Hoard = () => {
    return <div>
        <FullCalendar
            plugins={[ dayGridPlugin ]}
            initialView="dayGridMonth"
        />
    </div>
}

export default Hoard;

运行./bin/dev加载页面时，出现Sprockets::DoubleLinkError in application.css错误，提示Rails生成的app/assets/builds/application.css与app/assets/stylesheets/application.css存在命名冲突。FullCalendar本身没有名为application.css的文件，但卸载它、删除node_modules、执行rake assets:clobber再运行rake assets:precompile就能修复问题。请问这是FullCalendar的问题还是Rails的问题？

分析与结论 #

这本质是Rails 7资产管道（Sprockets）与前端打包工具（Webpack/Vite）的资源处理冲突，FullCalendar只是触发问题的诱因，而非根源：

1. Rails 7默认逻辑里，app/assets/stylesheets/application.css是Sprockets的源入口文件，app/assets/builds/application.css是前端打包工具的编译产物。正常情况下两者各司其职，但FullCalendar的CSS被打包到application.css后，会触发Sprockets的资源检测，使其误将编译产物视为与源文件重名，抛出冲突错误。
2. FullCalendar本身没有提供application.css，但它的样式会被Webpack/Vite合并到项目的application.css编译产物中，这才让Sprockets扫描到两个同名文件，触发了内置的冲突检测机制。

解决建议 #

• 让Sprockets忽略编译产物目录：在config/initializers/assets.rb中添加Rails.application.config.assets.excluded_paths << 'app/assets/builds'，避免它扫描builds下的编译文件。
• 若使用Vite集成，确保config/initializers/assets.rb未将builds目录加入资产路径，同时在config/application.rb中正确配置Vite的集成规则。
• 修改Sprockets入口文件名：把app/assets/stylesheets/application.css改名为custom.css之类的唯一名称，同步更新layouts/application.html.erb中的样式引用路径，从根源避免重名冲突。

内容的提问来源于stack exchange，提问作者DawnPaladin