Tailwind CSS 未在 Google Cloud Platform 上的生产环境中显示答案

【问题标题】：Tailwind CSS Doesn't Display In Production On Google Cloud PlatformTailwind CSS 未在 Google Cloud Platform 上的生产环境中显示
【发布时间】：2020-06-17 18:15:57
【问题描述】：

我将 Tailwind CSS 集成到我的 Rails 6 应用程序中。 CSS 在开发中显示良好，但在生产中却不是这样。

这就是我的application.html.erb 的样子；

 <!DOCTYPE html>
<html>
  <head>
    <title>HomePetVet</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <% unless flash.empty? %>
      <script type="text/javascript">
        <% flash.each do |f| %>
          <% type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info') %>
          toastr['<%= type %>']('<%= f[1] %>');
        <% end %>
      </script>
    <% end %>
    <%= yield %>
    <%= javascript_pack_tag 'sb-admin-2', 'data-turbolinks-track': 'reload' %>
  </body>
</html>

这是我的webpacker.yml 文件；

 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

我在webpacker.yml 中看到extract_css 到true

这是我的package.json 文件；

 {
  "name": "MyProject",
  "private": true,
  "dependencies": {
    "tailwindcss": "^1.4.6",
    "toastr": "^2.1.4",
    "turbolinks": "^5.2.0",
    "yarn": "^1.22.4"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

您可以观察到tailwindcss 不在devDependencies 之下。在通过gcloud app deploy 部署到gcp 之前，我会使用RAILS_ENV=production rails assets:precompile，但tailwind css 仍然没有在生产中显示。

我跟随 this 将我的 Rails 6 应用程序部署到 GCP。

这是我的app.yaml 文件：

entrypoint: bundle exec rails server Puma -p $PORT
runtime: ruby
env: flex

manual_scaling:
 instances: 1
resources:
 cpu: 1
 memory_gb: 0.5
 disk_size_gb: 10

在app.yaml 中通知entrypoint: bundle exec rails server Puma -p $PORT。指南中的那个是entrypoint: bundle exec rackup --port $PORT

我不知道这是否会有所不同，但我想提一下。

我哪里出错了？

【问题讨论】：

您能否描述有关部署到您的生产环境中的更多信息？遵循了哪些 GCP 文档？我想邀请您将问题发布到Public Issue Tracker，以提供有关您问题的更多详细信息。
@JanL 我已经通过指向我遵循的指南的链接更新了问题。谢谢！

标签： google-cloud-platform ruby-on-rails-6 tailwind-css

【解决方案1】：

万一，另一个开发者遇到了这个问题，我就是这样解决的；

我编辑了postcss.config.js 文件以包含require('autoprefixer')

    let environment = {
    plugins: [
        require('autoprefixer'), #added this
        require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),
        require('postcss-import'),
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
            autoprefixer: {
                flexbox: 'no-2009'
            },
            stage: 3
        })
    ]
};
module.exports = environment;

这样，Tailwind CSS 将在 GCP 上进行生产。

【讨论】：