Ruby on rails 无法将带有Tailwindcss和Webpacker的Rails部署到Elastic Beanstalk

经过几个小时的调试、搜索和尝试可能的解决方案，我仍然无法将Rails应用程序部署到Elastic Beanstalk并寻求帮助。部署失败，因为Rails在生产环境中找不到Tailwindcss。我已经附上了部署日志、项目配置和Elastic Beanstalk环境属性的基本部分。生产环境在本地计算机上编译时没有错误

非常感谢能够解决这个问题的任何见解

eb engine.log显示以下错误：

2020/11/28 00:39:19.602016 [INFO] Executing instruction: rake tasks
2020/11/28 00:39:19.602042 [INFO] Running command /bin/su webapp -c bundle exec /opt/elasticbeanstalk/config/private/checkforraketask.rb assets:precompile
2020/11/28 00:39:21.888082 [INFO] Found assets:precompile task in Rakefile
2020/11/28 00:39:21.888137 [INFO] Running command /bin/su webapp -c bundle exec rake assets:precompile
2020/11/28 00:39:23.310984 [ERROR] An error occurred during execution of command [app-deploy] - [rake tasks]. Stop running the command. Error: running rake task assets:precompile failed with error command bundle exec rake assets:precompile failed with error Command /bin/su webapp -c bundle exec rake assets:precompile failed with error exit status 1. Stderr:Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install
rake aborted!
SassC::SyntaxError: Error: File to import not found or unreadable: tailwindcss/base.
        on line 1:1 of app/assets/stylesheets/application.scss
>> @import "tailwindcss/base";

   ^
/var/app/staging/app/assets/stylesheets/application.scss:1
/var/app/staging/vendor/bundle/ruby/2.7.0/gems/sassc-2.1.0-x86_64-linux/lib/sassc/engine.rb:49:in `render'

弹性豆茎环境属性：

package.json

{
  "name": "budgeteer",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@fullhuman/postcss-purgecss": "^3.0.0",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "flatpickr": "^4.6.6",
    "postcss": "^8.1.9",
    "stimulus": "^1.1.1",
    "stimulus-flatpickr": "^1.3.3",
    "tailwindcss": "^2.0.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "eslint": "^7.14.0",
    "eslint-plugin-tailwind": "^0.2.0",
    "stylelint-config-recommended": "^3.0.0",
    "webpack-dev-server": "^3.11.0"
  }
}

postss.config.js

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

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

module.exports = environment

module.exports = {
  future: {},
  purge: false,
  theme: {
    extend: {
      fontFamily: {},
  },
  variants: {},
  plugins: [],
}

tailwind.config.js

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

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

module.exports = environment

module.exports = {
  future: {},
  purge: false,
  theme: {
    extend: {
      fontFamily: {},
  },
  variants: {},
  plugins: [],
}

app/assets/stylesheets/application.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

...

app/javascript/packs/application.js

...

import "../../assets/stylesheets/application.scss"

...

config/environments/production.rb

Rails.application.configure do
  config.cache_classes = true

  config.eager_load = true

  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

  config.assets.compile = false

  config.active_storage.service = :local

  config.log_level = :debug

  config.log_tags = [ :request_id ]

  config.action_mailer.perform_caching = false

  config.i18n.fallbacks = true

  config.active_support.deprecation = :notify

  config.log_formatter = ::Logger::Formatter.new

  if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger    = ActiveSupport::TaggedLogging.new(logger)
  end

  config.active_record.dump_schema_after_migration = false
end

config/webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  resolved_paths: []

  cache_manifest: false

  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

production:
  <<: *default

  compile: false

  extract_css: true

  cache_manifest: true

default:&default
源路径：app/javascript
来源\输入\路径：包
public\u root\u路径：public
公共\u输出\u路径：包
缓存路径：tmp/cache/webpacker
检查纱线的完整性：错误
网页包编译输出：true
已解析的路径：[]
缓存清单：false
提取css:false
静态资源扩展：
-jpg先生
-.jpeg
-.png
-.gif
-蒂芙先生
-.ico
-.svg
-.eot
-.otf
-.ttf
-沃夫先生
-woff2先生
扩展：
-mjs先生
-.js
-萨斯先生
-.scss
-.css
-.module.sass
-.module.scss
-.module.css
-.png
-.svg
-.gif
-.jpeg
-jpg先生
制作：
它告诉你在预编译前安装纱线。
我实现了在该文件中添加.ebextension：

$ cat .ebextensions/10-node.config 
commands:
  command1:
    command: "curl -sL https://rpm.nodesource.com/setup_15.x | bash -"
  command2:
    command: "yum -y install nodejs"
  command3:
    command: "npm install -g yarn@1"

仔细检查ebextensions更强大的用法

它告诉你在预编译前安装纱线。
我实现了在该文件中添加.ebextension：

$ cat .ebextensions/10-node.config 
commands:
  command1:
    command: "curl -sL https://rpm.nodesource.com/setup_15.x | bash -"
  command2:
    command: "yum -y install nodejs"
  command3:
    command: "npm install -g yarn@1"

仔细检查ebextensions更强大的用法