Wicked_PDF 不呈现 bootstrap 4 样式答案

【问题标题】：Wicked_PDF not rendering bootstrap 4 stylesWicked_PDF 不呈现 bootstrap 4 样式
【发布时间】：2019-03-20 11:45:48
【问题描述】：

按照我之前的 wicked_pdf 问题，现在我正在呈现正确的模板，我无法获取 pdf 来呈现应用程序的引导样式。

我正在使用 bootstrap 4，ruby '2.4.2' 和 gem 'rails'，'~> 5.2.1'

app/controllers/proposals_controller.rb

def show
    @proposal = Proposal.find(params[:id])
    @custom_content = @proposal.custom_contents
    respond_to do |format|
      format.html
      format.pdf do
        render pdf: "some_name",
               template: "proposals/show.pdf.erb",
               layout: "pdf.html",
               margin: { top: 35, bottom: 35 }
      end
    end
  end

app/views/layouts/pdf.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>PDF</title>
  <%= wicked_pdf_stylesheet_link_tag "application" -%>
</head>
<body>
<div class='container d-flex justify-content-center'>
  test 2
  <%= yield %>
</div>
</body>
</html>
app/views/proposals/show.pdf.erb

<div class="row full-page justify-content-center" id="cover">
  <div class="container">
    <div class="row p-0">
      <div class="col-12 d-flex align-items-end ">
        <%= wicked_pdf_image_tag '1209232_1920-1.jpg' %>
      </div>
    </div>
    <div class="row pt-1 d-flex align-items-end text-justify">
      <div class="col-12 text-justify cover-background">
        <div class="row pt-1">
          <h2 class="text-white text-justify">Proposal For <br> Maintenance</h2>
        </div>
        <div class="row p-0">
          <div class="col-6">
            <h5 class="text-white text-justify">Prepared For: <%= @proposal.contact.name %></h5>
            <h6></h6>
          </div>
          <div class="col-6">
            <h5 class="text-white text-justify">Prepared By: <%= @proposal.user.name %></h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

app/assets/stylesheets/application.scss

// $navbar-default-bg: #312312;
// $light-orange: #ff8c00;
// $navbar-default-color: $light-orange;
$brand-color: #30AADD;

@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap";
@import "sticky-footer";
@import "announcements";
@import "summernote-bs4";
@import "summernote-custom-theme.min";
@import "material_icons";


// Proposal Cover
.full-page {
  min-height: 100vh;
}
.cover-image{
  background-image: url('https://heliportstudios.com/wp-content/uploads/2016/09/new-york-1209232_1920-1.jpg');
  max-width: 100%;
  max-height: 100vh;
}

.cover-background {
  background: $brand-color;
}

plus alot of custom styling

我看过很多这样的案例，但似乎没有任何效果

【问题讨论】：

标签： css ruby-on-rails bootstrap-4 ruby-on-rails-5 wicked-pdf

【解决方案1】：

在你的pdf.html.erb的头，你需要引用bootstrap css文件。

<head>
  <title>PDF</title>
  <%= wicked_pdf_stylesheet_link_tag "application" -%>
  <%= wicked_pdf_stylesheet_link_tag "bootstrap" %>
</head>

将 bootstrap.css 文件添加到您的资产/样式表中。

【讨论】：

这是否意味着我必须创建一个 bootstrap.scss 文件？
应该已经在您的资产文件夹中。除非您使用 gem 进行引导。
请打鼓...是的我是...但是...我确实尝试过 maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" %> maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" %> 但是什么都没有……有什么想法吗？
您是否在 application.css 中添加了 *= 需要引导程序？尝试将 bootstrap.css（从网站下载）文件添加到您的资产/样式表中。
我的应用程序 scss @import "bootstrap";还不够吗？我现在不能 *= 要求