Tailwind CSS 在 Google 云平台上的生产环境中不显示

Question

我将 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

我不知道这是否有影响，但我想提一下。

我哪里出错了？

Answer 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 上投入生产。

Tailwind CSS 在 Google 云平台上的生产环境中不显示

Tailwind CSS Doesn't Display In Production On Google Cloud Platform

google-cloud-platform

tailwind-css

ruby-on-rails-6