Блог

Главная - Вопросы по программированию - рельсы 6 heroku asset предварительная компиляция не работает в производстве

рельсы 6 heroku asset предварительная компиляция не работает в производстве

#heroku #webpack #asset-pipeline #ruby-on-rails-6 #tailwind-css

Вопрос:

У меня есть приложение rails 6, tailwind, и оно отлично работает в разработке. Но когда я нажимаю на heroku, компиляция активов, похоже, не работает. В результате в производственном приложении отсутствует CSS.

Мне удалось воспроизвести ту же ошибку на своем локальном компьютере, выполнив: RAILS_ENV=производственный пакет exec rake assets:предварительная компиляция

Тогда у меня также нет css, отображаемого в моем локальном приложении. Когда я затем выполняю RAILS_ENV=пакет для разработки, выполните сборку ресурсов:предварительная компиляция

это снова работает.

вот мой файл 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

Вот мое приложение.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;

And here is my tailwind.config.js

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

And my 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/**"
    ]
  }
}
Метки: