未在Heroku（Rails 6-Webpack）的生产环境中编译的第三方CSS。

Question

我的应用程序在我的dev＆qa环境中都工作正常，这两个环境的所有环境变量都设置为“ DEV”。但是，在Heroku的生产环境中，与第三大JS库相关的CSS似乎没有被编译。具体的库为：-全日历：https://fullcalendar.io/docs#toc-DateTimePicker：https://xdsoft.net/jqplugins/datetimepicker/

我的堆栈是：-Rails 6（使用webpacker）-jQuery的-引导程序

主引导程序CSS在PRD中很好，所有javascript也是如此。只是没有属于日历和日期选择器的CSS。

这是我的application.js文件

require("bootstrap")
require("@fortawesome/fontawesome-free/js/all")
require('summernote')
require("summernote/dist/summernote.css")
require('jquery-ui/ui/widgets/sortable')
require('jquery-ui/ui/effects/effect-blind')
require('jquery-ui/ui/effects/effect-highlight')
require('jquery-datetimepicker')
require('jquery-datetimepicker/jquery.datetimepicker.css')

// custom scripts
require("application/calendar")
require("application/datepicker")
require("application/custom")

在日历文件中，我要求并启动FullCalendar，如下所示：

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
//import listPlugin from '@fullcalendar/list';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';
//import '@fullcalendar/list/main.css';
import bootstrapPlugin from '@fullcalendar/bootstrap';

在我的布局中，我使用以下标记：

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <!--   -->
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'  %> <!-- -->

所有这些都在开发中很好。

PRD中的结果如下所示：

应该看起来像这样：

与日期选择器的效果相似。日历似乎具有引导CSS，它是应用程序的一部分，但缺少特定的CSS。

我已经尝试了很多不同的方法。-资产不是预编译的，而是在部署到生产期间进行编译的-我尝试使用css-pack_tag而不是css_include_tag，但这只会引发错误。因为css是在.js文件中导入的，所以与我所知道的无关。

不确定从这里到哪里。

更新：

我还注意到，在生产中的样式表中没有日期选择器和日历的样式。所有日历样式均以“ fc-”开头，所有日期选择器样式均以“ xdsoft_”开头。这些键都不在加载的样式表中。

我的应用程序在我的dev＆qa环境中都工作正常，这两个环境的所有环境变量都设置为“ DEV”。但是，在我的Heroku生产环境中，与第三大JS库相关的CSS ...

Answer 1

临时解决方案：我将PRD中的webpacker配置切换为：