我正在尝试将 Tailwind CSS rails 应用程序部署到 Heroku，但在 Heroku 尝试编译它时它一直失败。
它在本地运行良好。我做了很多搜索，并尝试将模块包含在依赖项中，而不仅仅是 devdependencies，之后它将一些模块从 devdependencies 移到了依赖项，然后 Tailwind CSS 无法在本地工作。当我使用 git log 并回滚到历史存储库时，Tailwind CSS 仍然无法在本地工作，这令人沮丧。我做了 npx webpack-cli init 和 yarn add 错过的模块，让顺风再次发挥作用。
现在我正在尝试部署到 Heroku，错误仍然存在。我对 Tailwind CSS 和 Rails 非常陌生，请帮助我。
错误信息：
-----> Building on the Heroku-20 stack
-----> Determining which buildpack to use for this app
! Warning: Multiple default buildpacks reported the ability to handle this app. The first buildpack in the list below will be used.
Detected buildpacks: Ruby,Node.js
See https://devcenter.heroku.com/articles/buildpacks#buildpack-detect-order
-----> Ruby app detected
-----> Installing bundler 2.2.16
-----> Removing BUNDLED WITH version in the Gemfile.lock
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-3.0.1
-----> Installing dependencies using bundler 2.2.16
Running: BUNDLE_WITHOUT='development:test' BUNDLE_PATH=vendor/bundle BUNDLE_BIN=vendor/bundle/bin BUNDLE_DEPLOYMENT=1 bundle install -j4
Fetching gem metadata from https://rubygems.org/............
Fetching https://github.com/rails/webpacker.git
Fetching rake 13.0.3
Installing rake 13.0.3
Fetching concurrent-ruby 1.1.8
Fetching minitest 5.14.4
Fetching builder 3.2.4
Fetching zeitwerk 2.4.2
Installing builder 3.2.4
Installing concurrent-ruby 1.1.8
Fetching erubi 1.10.0
Installing erubi 1.10.0
Installing zeitwerk 2.4.2
Fetching mini_portile2 2.5.0
Fetching racc 1.5.2
Installing minitest 5.14.4
Installing mini_portile2 2.5.0
Fetching crass 1.0.6
Fetching rack 2.2.3
Installing crass 1.0.6
Fetching nio4r 2.5.7
Fetching websocket-extensions 0.1.5
Installing websocket-extensions 0.1.5
Installing nio4r 2.5.7 with native extensions
Installing racc 1.5.2 with native extensions
Fetching marcel 1.0.1
Installing rack 2.2.3
Installing marcel 1.0.1
Fetching mini_mime 1.0.3
Fetching bcrypt 3.1.16
Installing bcrypt 3.1.16 with native extensions
Installing mini_mime 1.0.3
Fetching msgpack 1.4.2
Installing msgpack 1.4.2 with native extensions
Fetching bson 4.12.0
Installing bson 4.12.0 with native extensions
Using bundler 2.2.16
Fetching orm_adapter 0.5.0
Installing orm_adapter 0.5.0
Fetching method_source 1.0.0
Installing method_source 1.0.0
Fetching thor 1.1.0
Installing thor 1.1.0
Fetching ffi 1.15.0
Installing ffi 1.15.0 with native extensions
Fetching tilt 2.0.10
Installing tilt 2.0.10
Fetching semantic_range 3.0.0
Installing semantic_range 3.0.0
Fetching turbolinks-source 5.2.0
Installing turbolinks-source 5.2.0
Fetching i18n 1.8.10
Installing i18n 1.8.10
Fetching tzinfo 2.0.4
Installing tzinfo 2.0.4
Fetching websocket-driver 0.7.3
Installing websocket-driver 0.7.3 with native extensions
Fetching rack-test 1.1.0
Installing rack-test 1.1.0
Fetching warden 1.2.9
Installing warden 1.2.9
Fetching rack-proxy 0.6.5
Fetching sprockets 4.0.2
Installing sprockets 4.0.2
Installing rack-proxy 0.6.5
Fetching mail 2.7.1
Fetching nokogiri 1.11.3 (x86_64-linux)
Installing mail 2.7.1
Fetching mongo 2.14.0
Installing nokogiri 1.11.3 (x86_64-linux)
Installing mongo 2.14.0
Fetching turbolinks 5.2.1
Installing turbolinks 5.2.1
Fetching activesupport 6.1.3.1
Installing activesupport 6.1.3.1
Fetching puma 4.3.7
Installing puma 4.3.7 with native extensions
Fetching loofah 2.9.1
Installing loofah 2.9.1
Fetching rails-dom-testing 2.0.3
Installing rails-dom-testing 2.0.3
Fetching globalid 0.4.2
Installing globalid 0.4.2
Fetching activemodel 6.1.3.1
Installing activemodel 6.1.3.1
Fetching jbuilder 2.11.2
Installing jbuilder 2.11.2
Fetching rails-html-sanitizer 1.3.0
Installing rails-html-sanitizer 1.3.0
Fetching activejob 6.1.3.1
Installing activejob 6.1.3.1
Fetching activerecord 6.1.3.1
Installing activerecord 6.1.3.1
Fetching mongoid 7.0.12
Installing mongoid 7.0.12
Fetching actionview 6.1.3.1
Installing actionview 6.1.3.1
Fetching bootsnap 1.7.3
Installing bootsnap 1.7.3 with native extensions
Fetching actionpack 6.1.3.1
Installing actionpack 6.1.3.1
Fetching actioncable 6.1.3.1
Fetching activestorage 6.1.3.1
Installing actioncable 6.1.3.1
Installing activestorage 6.1.3.1
Fetching actionmailer 6.1.3.1
Installing actionmailer 6.1.3.1
Fetching railties 6.1.3.1
Fetching sprockets-rails 3.2.2
Installing sprockets-rails 3.2.2
Fetching actionmailbox 6.1.3.1
Installing actionmailbox 6.1.3.1
Installing railties 6.1.3.1
Fetching actiontext 6.1.3.1
Installing actiontext 6.1.3.1
Fetching rails 6.1.3.1
Fetching responders 3.0.1
Installing responders 3.0.1
Installing rails 6.1.3.1
Using webpacker 5.1.1 from https://github.com/rails/webpacker.git (at b6c2180@b6c2180)
Fetching devise 4.7.3
Installing devise 4.7.3
Fetching sassc 2.4.0
Installing sassc 2.4.0 with native extensions
Fetching sassc-rails 2.1.2
Installing sassc-rails 2.1.2
Fetching sass-rails 6.0.0
Installing sass-rails 6.0.0
Bundle complete! 18 Gemfile dependencies, 64 gems now installed.
Gems in the groups 'development' and 'test' were not installed.
Bundled gems are installed into `./vendor/bundle`
Bundle completed (137.87s)
Cleaning up the bundler cache.
-----> Installing node-v12.16.2-linux-x64
-----> Installing yarn-v1.22.4
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
Running: rake assets:precompile
yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > babel-loader@8.2.2" has unmet peer dependency "@babel/core@^7.0.0".
[4/4] Building fresh packages...
Done in 33.41s.
I, [2021-04-30T05:40:28.813770 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js
I, [2021-04-30T05:40:28.814200 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js.gz
I, [2021-04-30T05:40:28.814604 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/logo1-a4a345d931aae1d661ad3dceec7605301e2083c97f65b15da43d15b023f43a1f.jpg
I, [2021-04-30T05:40:28.816477 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/logo1-b922448a1983cdaaa6a0eb406fc50720a7a2f8435b06538b0a1cf6957eecf134.svg
I, [2021-04-30T05:40:28.817201 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/logo1-b922448a1983cdaaa6a0eb406fc50720a7a2f8435b06538b0a1cf6957eecf134.svg.gz
I, [2021-04-30T05:40:28.817385 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/application-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-04-30T05:40:28.817531 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/application-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2021-04-30T05:40:28.817707 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/home-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-04-30T05:40:28.817844 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/home-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2021-04-30T05:40:28.818019 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/products-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-04-30T05:40:28.818208 #1266] INFO -- : Writing /tmp/build_6dd2a3ee/public/assets/products-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
Compiling...
Compilation failed:
(node:1318) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(node:1318) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(node:1318) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:1318) [DEP_WEBPACK_CHUNK_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: ChunkTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
[webpack-cli] ModuleNotFoundError: Module not found: Error: Can't resolve 'css-loader' in '/tmp/build_6dd2a3ee'
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/Compilation.js:1735:28
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:726:13
at eval (eval at create (/tmp/build_6dd2a3ee/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:273:22
at eval (eval at create (/tmp/build_6dd2a3ee/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:488:15
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:117:11
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:567:8
at /tmp/build_6dd2a3ee/node_modules/neo-async/async.js:2830:7
at done (/tmp/build_6dd2a3ee/node_modules/neo-async/async.js:2925:13)
at /tmp/build_6dd2a3ee/node_modules/webpack/lib/NormalModuleFactory.js:962:23
at finishWithoutResolve (/tmp/build_6dd2a3ee/node_modules/enhanced-resolve/lib/Resolver.js:296:11)
at /tmp/build_6dd2a3ee/node_modules/enhanced-resolve/lib/Resolver.js:362:15
at /tmp/build_6dd2a3ee/node_modules/enhanced-resolve/lib/Resolver.js:410:5
at eval (eval at create (/tmp/build_6dd2a3ee/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
at /tmp/build_6dd2a3ee/node_modules/enhanced-resolve/lib/Resolver.js:410:5
resolve 'css-loader' in '/tmp/build_6dd2a3ee'
Parsed request is a module
using description file: /tmp/build_6dd2a3ee/package.json (relative path: .)
resolve as module
looking for modules in /tmp/build_6dd2a3ee/node_modules
single file module
using description file: /tmp/build_6dd2a3ee/package.json (relative path: ./node_modules/css-loader)
no extension
/tmp/build_6dd2a3ee/node_modules/css-loader doesn't exist
.js
/tmp/build_6dd2a3ee/node_modules/css-loader.js doesn't exist
/tmp/build_6dd2a3ee/node_modules/css-loader doesn't exist
/tmp/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
!
! Precompiling assets failed.
!
! Push rejected, failed to compile Ruby app.
! Push failed
我的 package.json 文件：
{
"name": "my-webpack-project",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "rails/webpacker#b6c2180",
"@tailwindcss/aspect-ratio": "^0.2.0",
"@tailwindcss/forms": "^0.3.2",
"@tailwindcss/typography": "^0.4.0",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.2.2",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.0.1",
"tailwindcss": "^2.1.1",
"turbolinks": "^5.2.0",
"webpack-cli": "^4.6.0"
},
"version": "1.0.0",
"devDependencies": {
"@webpack-cli/generators": "^2.0.0",
"css-loader": "^5.2.2",
"html-webpack-plugin": "^5.3.1",
"postcss": "^8.2.10",
"postcss-loader": "^5.2.0",
"sass": "^1.32.10",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.33.2",
"webpack-dev-server": "^3.11.2"
},
"description": "My webpack project",
"scripts": {
"build": "webpack --mode=production",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production",
"watch": "webpack --watch",
"serve": "webpack serve"
}
}
我的 webpack.config 文件：
// Generated using webpack-cli http://github.com/webpack-cli
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
},
devServer: {
open: true,
host: 'localhost',
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
// Add your plugins here
// Learn more obout plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
type: 'asset',
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
我的 application.scss 文件：
/* tailwind */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
我的 webpacker.yml 文件：
# Note: You must restart bin/webpack-dev-server for changes to take effect
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
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
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
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
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