rails 6 heroku 资产预编译在生产中不起作用

如何解决rails 6 heroku 资产预编译在生产中不起作用

我有一个 rails 6，tailwind 应用程序，它在开发中运行良好。但是当我将它推送到 heroku 时，资产编译似乎不起作用。结果是生产应用中没有 CSS。

我通过执行以下操作设法在本地计算机上复制了相同的错误： RAILS_ENV=生产包 exec rake 资产：预编译

然后我的本地应用程序上也没有显示 css。当我然后做 RAILS_ENV=development bundle exec rake assets：预编译

它又开始工作了。

这是我的 bin/webpack 文件：

ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"]  ||= "development"

require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",Pathname.new(__FILE__).realpath)

require "bundler/setup"

require "webpacker"
require "webpacker/webpack_runner"


APP_ROOT = File.expand_path("..",__dir__)
Dir.chdir(APP_ROOT) do
  Webpacker::WebpackRunner.run(ARGV)
end

这是我的 application.html.erb：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_Meta_tags %>
    <%= csp_Meta_tag %>
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css"

    <%= stylesheet_link_tag 'application',media: 'all','data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application','data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application','data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= flash[:alert] %>
    <%= flash[:notice] %>
    <%= yield %>
    <%= render 'layouts/footer' %>
  </body>
</html>

这是我的 postcss.config.js

let environment = {
  plugins: [
    require('tailwindcss')('./app/javascript/stylesheet/tailwind.config.js'),require('postcss-import'),require('postcss-flexbugs-fixes'),require('postcss-preset-env')({
      autoprefixer: {
        flexBox: 'no-2009'
      },stage: 3
    })
  ]
};

// Add everything below!
if (process.env.RAILS_ENV === 'production') {
  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        './app/**/.html.erb','./app/helpers/**/*.rb','./app/javascript/**/*.js','./app/javascript/**/*.jsx',],defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  )
}

module.exports = environment;

这是我的 tailwind.config.js

module.exports = {
  purge: [
  './app/**/*.html.erb','./app/javascript/**/*.js'
  ],darkMode: false,// or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var'],},variants: {
    extend: {},plugins: [],}

还有我的 package.json

{
  "name": "myapp","private": true,"dependencies": {
    "@rails/actioncable": "^6.0.0","@rails/activestorage": "^6.0.0","@rails/ujs": "^6.0.0","@rails/webpacker": "5.2.1","tailwindcss": "npm:@tailwindcss/postcss7-compat","turbolinks": "^5.2.0","webpack": "^4.0.0"
  },"version": "0.1.0","devDependencies": {
    "autoprefixer": "^9","postcss": "^7","webpack-dev-server": "^3.11.2"
  },"workspaces": {
    "nohoist": [
      "**/tailwindcss","**/@tailwindcss/**"
    ]
  }
}