Using WickedPDF with Webpacker & Bulma CSS

[DaniG2k]

Issue description

I'm trying to use WickedPDF in a Rails 6 project that uses the Bulma CSS framework. However, I cannot get it to work properly and I'm wondering what I am doing wrong.

I have a pdf.html.slim layout file with the following:

doctype html
html
  head
    meta charset="utf-8"
    meta name="viewport" content="width=device-width, initial-scale=1"
    title= content_for?(:title) ? content_for(:title) : t('website.title')
    = wicked_pdf_stylesheet_pack_tag 'pdf'
    = wicked_pdf_javascript_pack_tag 'pdf'

  body
    .containers
      .container
        = yield

My app/javascript/packs/pdf.js file looks like this:

import 'stylesheets/pdf';

which in turn calls app/javascript/stylesheets/pdf.css

@import 'colors';

// ~ to tell webpack that this is not a relative
// import (but in node_modules dir):
@import '~bulma';

When I open a PDF, however, none of the Bulma styling is applied.

I'm using a vanilla config/webpacker.yml file:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .vue
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

Expected or desired behavior

The styling currently works as expected on the website but not on PDFs.
I'd expect that using Bulma CSS via webpacker displays styles properly in wicked_pdf generated files.

System specifications

• Rails version: 6.0.3.2
• wicked_pdf gem version (output of cat Gemfile.lock | grep wicked_pdf): 2.1.0
• wkhtmltopdf version (output of wkhtmltopdf --version): 0.12.6 (with patched qt)
• platform/distribution and version: MacOS 10.15.5

[DaniG2k]

I can confirm that if I use a link to the assets via a CDN, the PDF renders correctly.

[chalmagean]

+1

[grizzly94]

+1

[dbil25]

+1

[unixmonkey]

I think what's happening here is the @import '~bulma' is a CSS import, which tries to make a relative HTTP request to load additional styles, however WickedPDF saves your HTML to a file, and inlines your CSS, so a relative import won't work.

If you preprocess your CSS files with Sass, @import inlines the CSS, which should bring it into your final documents. There may be a similar preprocessor for Webpack you could use also.
Or you can specify the full HTTP/HTTPS path in the import, or use a CDN provided stylesheet.

Please let me know if this helps.

[dbil25]

turns out in my case, it was because wicked_pdf_stylesheet_pack_tags was not working properly with webpacker-dev-server. I implemented this solution and now imports my css correctly in the pdf:
#860 (comment)

hope it helps

[unixmonkey]

Looks like this was fixed in #973

Please reopen if this can be reproduced in the latest version.