Tailwind CSS在Google Cloud平台上的生产环境中无法显示

Question

Tailwind CSS在Google Cloud平台上的生产环境中无法显示

google-cloud-platformruby-on-rails-6tailwind-css

3

我将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仍未在生产环境中显示。

我遵循此文档将我的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。

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

我可能做错了什么？

- Esseme

您能否提供有关在生产环境中部署的更多信息？遵循了哪些GCP文档？我想邀请您将问题发布到公共问题跟踪器，以提供有关您的问题的更多详细信息。 - Jan L

@JanL 我已经更新了问题，并附上了我所遵循的指南链接。谢谢！ - Esseme

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Esseme · Accepted Answer

如果其他开发者遇到这个问题，这是我解决它的方法：

我编辑了 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上投入生产使用。