Can't add stylesheets to wicked_pdf

Question

I tried adding tailwind css stylesheets to wicked_pdf, but every time I try to open the pdf I get this error:

Webpacker can't find {:media=>"all", :host=>"localhost:3035"}.css in /home/maciej/Projekty/cannabishouse/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.css": "/packs/css/application-b8658b53.css",
  "application.css.map": "/packs/css/application-b8658b53.css.map",
  "application.js": "/packs/js/application-555b9c324ca8bf05eb9d.js",
  "application.js.map": "/packs/js/application-555b9c324ca8bf05eb9d.js.map",
  "entrypoints": {
    "application": {
      "css": [
        "/packs/css/application-b8658b53.css"
      ],
      "js": [
        "/packs/js/application-555b9c324ca8bf05eb9d.js"
      ],
      "css.map": [
        "/packs/css/application-b8658b53.css.map"
      ],
      "js.map": [
        "/packs/js/application-555b9c324ca8bf05eb9d.js.map"
      ]
    },
    "pdf": {
      "css": [
        "/packs/css/pdf-c4869a62.css"
      ],
      "js": [
        "/packs/js/pdf-e0d85b85c0d0ab42a1d2.js"
      ],
      "css.map": [
        "/packs/css/pdf-c4869a62.css.map"
      ],
      "js.map": [
        "/packs/js/pdf-e0d85b85c0d0ab42a1d2.js.map"
      ]
    }
  },
  "pdf.css": "/packs/css/pdf-c4869a62.css",
  "pdf.css.map": "/packs/css/pdf-c4869a62.css.map",
  "pdf.js": "/packs/js/pdf-e0d85b85c0d0ab42a1d2.js",
  "pdf.js.map": "/packs/js/pdf-e0d85b85c0d0ab42a1d2.js.map",
  "qr-scanner-worker.min.js": "/packs/2722a1f5d7ca17adce676581a899ff55.js"
}

controller

respond_to do |format|
      format.html
      format.pdf do
        render pdf: "index.pdf.haml",
        layout: 'pdf.html.haml',
        page_size: 'A4',
        disposition: 'inline'
      end
    end

layouts/pdf.html.haml

!!!
%html
  %head
    %meta{:charset => "utf-8"}/
    = pdf_stylesheet_pack_tag 'pdf'
    = pdf_javascript_pack_tag 'pdf'
  %body.bg-white.w-full.overflow-x-hidden.static
    .w-full.mx-auto.flex.flex-col.h-screen
      = yield

pdf_helper

module PdfHelper
  def pdf_stylesheet_pack_tag(source)
    if Rails.env.development?
      options = { media: "all" }
      wds = Webpacker.dev_server
      options[:host] = "#{wds.host}:#{wds.port}" unless show_as_html?
      stylesheet_pack_tag(source, options)
    else
      wicked_pdf_stylesheet_pack_tag(source)
    end
  end

  def pdf_javascript_pack_tag(source)
    if Rails.env.development?
      options = {}
      wds = Webpacker.dev_server
      options[:host] = "#{wds.host}:#{wds.port}" unless show_as_html?
      javascript_pack_tag(source, options)
    else
      wicked_pdf_javascript_pack_tag(source)
    end
  end

  def show_as_html?
    params[:debug].present?
  end

  def running_in_development?
    Webpacker.dev_server.running?
  end
end

app/javascript/stylesheets/pdf.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require actiontext
 *= require_tree .
 *= require_self
 */

@import 'app/assets/stylesheets/pdf.scss';
@import './actiontext.scss';
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'toastr';

app/javascript/packs/pdf.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from '@rails/ujs';
import Turbolinks from 'turbolinks';
import * as ActiveStorage from '@rails/activestorage';
import 'channels';
import 'stylesheets/application.scss';
import "stylesheets/pdf.scss"
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";
import 'controllers';

app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from '@rails/ujs';
import Turbolinks from 'turbolinks';
import * as ActiveStorage from '@rails/activestorage';
import 'channels';
import 'stylesheets/application.scss';
import "stylesheets/pdf.scss"
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";

app/assets/stylesheets/pdf.scss

// Graphical variables
@import 'config/index';

// Reusable Components
@import 'components/index';

// Pages
@import 'pages/index';

// Animaitons

@import 'aos/dist/aos.css'; // You can also use <link> for styles

I am not sure what I am doing wrong or if I have done anything right (working on an already configured application). Would anyone have any guidance or know how to do it right?

Answer 1

Okay, I figured it out. I had to add the following line to pdf head layout:

For HAML

%link{:href => "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", :rel => "stylesheet"}/

For HTML

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Final result:

!!!
%html.text-gray-900.leading-tight.max-w-screen{:translate => "no"}
  %head
    = display_meta_tags
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %link{:href => "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", :rel => "stylesheet"}/
    %meta{:content => content_for?(:description) ? yield(:description) : "House", :name => "description"}/
    %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
  %body.bg-white.w-full
    = yield