CODEWITHSUNDEEP
cssherokuwebpackproductionruby-on-rails-6
Boenne
Boenne

Reputation: 616

3rd party css not compiled in production on Heroku (Rails 6 - Webpack )

My app is working fine in my dev & qa environment which both have all environment variables set to "DEV". However, in my production environment on Heroku, CSS related to 3rd larty JS libraries doesn't seem to get compiled. The specific libraries are: - FullCalendar: https://fullcalendar.io/docs#toc - DateTimePicker: https://xdsoft.net/jqplugins/datetimepicker/

My stack is: - Rails 6 (using webpacker) - jQuery - Bootstrap

The main bootstrap css is fine in PRD and so is all of the javascript. Just the CSS that belongs to calendar and datepicker isn't there.

This is my application.js file

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")

within the calendar file, I require and initiate FullCalendar as follows:

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';

in my layouts, I use the following markup:

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

All of this is fine in development.

The result in PRD looks like this: enter image description here

should look like this:

enter image description here

Similar effect with the datepicker. The calendar seems to have the bootstrap css which is part of the application but the specific css is missing.

I already tried a lot of different things. - assets are not precompiled but compiled during deployment to production - I tried a css-pack_tag instead of a css_include_tag but that just throws an error. Doesn;t see to be related from what I can tell since the css is imported within the .js files.

Not sure where to go from here.

update:

I also noticed that the styles for datepicker and calendar are not present in the stylesheet in production. all calendar styles start with 'fc-', all datepicker styles start with 'xdsoft_'. None of these keys are in the loaded stylesheets.

Upvotes: 1

Views: 617

Answers (3)

Germano
Germano

Reputation: 179

You must to add a stylesheet_pack_tag in your layout.

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'  %>

this happen because extract_css: is true for production environment in webpack.yml.

Upvotes: 0

vgm
vgm

Reputation: 31

I am not sure if this will be your case, but I had a very similar issue and I fixed it by including a stylesheet_pack_tag (not link_tag) in my application layout. In my case the third party CSS styles were imported in an application.scss file inside app/javascript/stylesheets, so I had to add this in my layout:

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Upvotes: 0

Boenne
Boenne

Reputation: 616

Temporary solution: I switched the webpacker configuration in PRD to:

  extract_css: false

This will cause JS related css to be included inline in the JS file.

However, my question now would be: is that best practice? What are the pros and cons of this approach?

Upvotes: 1

Related Questions