Tailwind CSS не отображается в рабочей среде на платформе Google Cloud - PullRequest
0 голосов
/ 17 июня 2020

Я интегрировал 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 file;

 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

Я вижу extract_css в true в webpacker.yml

Это мой 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. Перед развертыванием на gcp к gcloud app deploy я делаю 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

Уведомление entrypoint: bundle exec rails server Puma -p $PORT в app.yaml. Один из руководства: entrypoint: bundle exec rackup --port $PORT

Я не знаю, имеет ли это значение, но я хотел бы упомянуть об этом.

Где я могу ошибиться?

1 Ответ

0 голосов
/ 01 июля 2020

В случае, если с этой проблемой столкнулся другой разработчик, вот как я ее решил;

Я отредактировал файл 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...