CSS 和 wicked_pdf 不起作用答案

【问题标题】：CSS and wicked_pdf not workingCSS 和 wicked_pdf 不起作用
【发布时间】：2019-01-24 03:53:51
【问题描述】：

我不确定我缺少什么，但我的 css 似乎没有与 wicked_pdf 一起工作。我的文件中链接了一张图片，该图片有效，但缺少样式。

宝石文件

gem 'wicked_pdf'
gem 'wkhtmltopdf-binary'

控制器

format.pdf do
  render pdf: "day_report", 
  template: 'day/day_report',
  page_size: 'A4'
end

application.html.erb

<head>
 <title>Page Title</title>
 <%= wicked_pdf_stylesheet_link_tag "styles" %>
 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

day_report.pdf.erb

<%= wicked_pdf_image_tag( 'logo.jpg', height: '100', width: '100') %>

<div class="page-header">
    Day Report
</div>

styles.css

.page-header {
  padding: 40px 0;
  background-color: red;
  text-color: #fff;
}

【问题讨论】：

尝试将样式直接添加到您的 day_report.pdf.erb。
这行得通，但似乎有点奇怪。

标签： ruby-on-rails ruby-on-rails-5 wicked-pdf

【解决方案1】：

为 pdf 创建不同的布局，如下所示。例如 pdf.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Page title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 
  'reload' %>
  <%= wicked_pdf_stylesheet_link_tag "styles" %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'%>
</head>
<body>
  <%= yield %>
</body>
</html>

将控制器操作更改为：

format.pdf do
  layout:'pdf.html',
  render pdf: "day_report", 
  template: 'day/day_report',
  page_size: 'A4',
  encoding:"UTF-8"
end

将styles.css更改为styles.scss并添加assets.rb。

Rails.application.config.assets.precompile += %w(styles.scss)

希望这会有所帮助。

干杯

【讨论】：

对。解决。当我需要将样式表链接放在 pdf 布局中时，我将它们放在我的应用程序标题中。干杯。
将 .css 文件添加到 assets.rb 对我有用。

【解决方案2】：

您能否将styles.css 重命名为styles.css.scss 并将此文件添加到预编译列表Rails.application.config.assets.precompile += %w(styles.css) 并尝试。

【讨论】：

我要把它放在我的开发/生产环境中吗？
可以放入application.rb文件
感谢 Prosenjit。仍然有同样的问题。只是无法识别样式。
您可以尝试在config/initializers/assets.rb 中添加以下config.assets.precompile += ['styles.css']
Kedarnag 也不行。