javascript - 如何使用 Tailwind CSS 读取和解决 Rails 中的 Webpack 错误？
问题描述
我尝试使用tailwindcss编译我的rails应用程序以进行生产，当我运行时，我RAILS_ENV=production rails assets:precompile在这里遇到了一些webpack错误：
Compiling...
Compilation failed:
Hash: feaac03eae9fc5e6434d
Version: webpack 4.46.0
Time: 3691ms
Built at: 2021-05-03 8:34:24
7 assets
Entrypoint application = js/application-719f586b83ab9096e6c4.js js/application-719f586b83ab9096e6c4.js.map
Entrypoint script/displayModal = js/script/displayModal-6f95a1a4d03fb01d89d2.js js/script/displayModal-6f95a1a4d03fb01d89d2.js.map
Entrypoint script/notify = js/script/notify-e556e1f24d4d09b43652.js js/script/notify-e556e1f24d4d09b43652.js.map
[1] (webpack)/buildin/module.js 552 bytes {0} [built]
[5] ./app/javascript/channels/index.js 205 bytes {0} [built]
[6] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
[7] ./app/javascript/stylesheets/application.scss 1.13 KiB {0} [built] [failed] [1 error]
[9] (webpack)/buildin/amd-options.js 80 bytes {0} [built]
[10] ./app/javascript/packs/script/displayModal.js 1.39 KiB {1} [built]
[11] ./app/javascript/packs/script/notify.js 405 bytes {2} [built]
[12] ./app/javascript/packs/application.js + 1 modules 25 KiB {0} [built]
| ./app/javascript/packs/application.js 898 bytes [built]
| + 1 hidden module
+ 5 hidden modules
ERROR in ./node_modules/@fortawesome/fontawesome-free/css/all.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/louis/RubymineProjects/Oktotweet/node_modules/postcss-loader/dist/index.js:38:24)
at /home/louis/RubymineProjects/Oktotweet/node_modules/webpack/lib/NormalModule.js:316:20
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:233:18
@ ./app/javascript/packs/application.js 5:165-211
ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: @tailwindcss/base.
on line 2 of /home/louis/RubymineProjects/Oktotweet/app/javascript/stylesheets/application.scss
>> @import "@tailwindcss/base";
^
at /home/louis/RubymineProjects/Oktotweet/node_modules/webpack/lib/NormalModule.js:316:20
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.callback (/home/louis/RubymineProjects/Oktotweet/node_modules/sass-loader/dist/index.js:73:7)
at Object.done [as callback] (/home/louis/RubymineProjects/Oktotweet/node_modules/neo-async/async.js:8069:18)
at options.error (/home/louis/RubymineProjects/Oktotweet/node_modules/node-sass/lib/index.js:294:32)
@ ./app/javascript/packs/application.js 5:133-165
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/dist/cjs.js??ref--5-2!node_modules/@fortawesome/fontawesome-free/css/all.css:
Entrypoint mini-css-extract-plugin = *
1 module
ERROR in ./node_modules/@fortawesome/fontawesome-free/css/all.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/dist/cjs.js??ref--5-2!./node_modules/@fortawesome/fontawesome-free/css/all.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/louis/RubymineProjects/Oktotweet/node_modules/postcss-loader/dist/index.js:38:24)
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/dist/cjs.js??ref--6-2!node_modules/sass-loader/dist/cjs.js??ref--6-3!app/javascript/stylesheets/application.scss:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/dist/cjs.js??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss 307 bytes {0} [built] [failed] [1 error]
ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/dist/cjs.js??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: @tailwindcss/base.
on line 2 of /home/louis/RubymineProjects/Oktotweet/app/javascript/stylesheets/application.scss
>> @import "@tailwindcss/base";
^
louis@Axolotl:~/RubymineProjects/Oktotweet$ RAILS_ENV=production rails assets:precompile
yarn install v1.22.10
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.52s.
Compiling...
Compilation failed:
Hash: 604b9e914cd01865580d
Version: webpack 4.46.0
Time: 1644ms
Built at: 2021-05-03 8:34:41
7 assets
Entrypoint application = js/application-8500d31757e42ce282b2.js js/application-8500d31757e42ce282b2.js.map
Entrypoint script/displayModal = js/script/displayModal-6f95a1a4d03fb01d89d2.js js/script/displayModal-6f95a1a4d03fb01d89d2.js.map
Entrypoint script/notify = js/script/notify-e556e1f24d4d09b43652.js js/script/notify-e556e1f24d4d09b43652.js.map
[1] (webpack)/buildin/module.js 552 bytes {0} [built]
[5] ./app/javascript/channels/index.js 205 bytes {0} [built]
[6] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
[7] ./app/javascript/stylesheets/application.scss 644 bytes {0} [built] [failed] [1 error]
[9] (webpack)/buildin/amd-options.js 80 bytes {0} [built]
[10] ./app/javascript/packs/script/displayModal.js 1.39 KiB {1} [built]
[11] ./app/javascript/packs/script/notify.js 405 bytes {2} [built]
[12] ./app/javascript/packs/application.js + 1 modules 25 KiB {0} [built]
| ./app/javascript/packs/application.js 898 bytes [built]
| + 1 hidden module
+ 5 hidden modules
ERROR in ./node_modules/@fortawesome/fontawesome-free/css/all.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/louis/RubymineProjects/Oktotweet/node_modules/postcss-loader/dist/index.js:38:24)
at /home/louis/RubymineProjects/Oktotweet/node_modules/webpack/lib/NormalModule.js:316:20
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:233:18
@ ./app/javascript/packs/application.js 5:165-211
ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/louis/RubymineProjects/Oktotweet/node_modules/postcss-loader/dist/index.js:38:24)
at /home/louis/RubymineProjects/Oktotweet/node_modules/webpack/lib/NormalModule.js:316:20
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:233:18
@ ./app/javascript/packs/application.js 5:133-165
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/dist/cjs.js??ref--5-2!node_modules/@fortawesome/fontawesome-free/css/all.css:
Entrypoint mini-css-extract-plugin = *
1 module
ERROR in ./node_modules/@fortawesome/fontawesome-free/css/all.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/dist/cjs.js??ref--5-2!./node_modules/@fortawesome/fontawesome-free/css/all.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/louis/RubymineProjects/Oktotweet/node_modules/postcss-loader/dist/index.js:38:24)
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/dist/cjs.js??ref--6-2!node_modules/sass-loader/dist/cjs.js??ref--6-3!app/javascript/stylesheets/application.scss:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/dist/cjs.js??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss 246 bytes {0} [built] [failed] [1 error]
ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/dist/cjs.js??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/louis/RubymineProjects/Oktotweet/node_modules/postcss-loader/dist/index.js:38:24)
louis@Axolotl:~/RubymineProjects/Oktotweet$ gem 'tailwindcss-rails', '~> 0.3.3'
ERROR: While executing gem ... (Gem::CommandLineError)
Unknown command tailwindcss-rails,
louis@Axolotl:~/RubymineProjects/Oktotweet$ gem install tailwindcss-rails
Fetching tailwindcss-rails-0.3.3.gem
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /var/lib/gems/2.7.0 directory.
louis@Axolotl:~/RubymineProjects/Oktotweet$ sudo gem install tailwindcss-rails
[sudo] Mot de passe de louis :
Fetching tailwindcss-rails-0.3.3.gem
Successfully installed tailwindcss-rails-0.3.3
Parsing documentation for tailwindcss-rails-0.3.3
Installing ri documentation for tailwindcss-rails-0.3.3
Done installing documentation for tailwindcss-rails after 0 seconds
1 gem installed
louis@Axolotl:~/RubymineProjects/Oktotweet$ ./bin/rails tailwindcss:install
rails aborted!
Don't know how to build task 'tailwindcss:install' (See the list of available tasks with `rails --tasks`)
/home/louis/RubymineProjects/Oktotweet/bin/rails:5:in `<top (required)>'
/home/louis/RubymineProjects/Oktotweet/bin/spring:10:in `block in <top (required)>'
/home/louis/RubymineProjects/Oktotweet/bin/spring:7:in `tap'
/home/louis/RubymineProjects/Oktotweet/bin/spring:7:in `<top (required)>'
(See full trace by running task with --trace)
louis@Axolotl:~/RubymineProjects/Oktotweet$ ./bin/bundle add tailwindcss-rails
Fetching gem metadata from https://rubygems.org/............
Resolving dependencies...
Fetching gem metadata from https://rubygems.org/............
Resolving dependencies...
Using rake 13.0.3
Following files may not be writable, so sudo is needed:
/usr/local/bin
/var/lib/gems/2.7.0
/var/lib/gems/2.7.0/build_info
/var/lib/gems/2.7.0/cache
/var/lib/gems/2.7.0/doc
/var/lib/gems/2.7.0/extensions
/var/lib/gems/2.7.0/gems
/var/lib/gems/2.7.0/specifications
Using concurrent-ruby 1.1.8
Using minitest 5.14.4
Using zeitwerk 2.4.2
Using builder 3.2.4
Using erubi 1.10.0
Using racc 1.5.2
Using crass 1.0.6
Using rack 2.2.3
Using nio4r 2.5.7
Using childprocess 3.0.0
Using marcel 1.0.1
Using regexp_property_values 1.0.0
Using method_source 1.0.0
Using ffi 1.15.0
Using json 2.5.1
Using rb-fsevent 0.10.4
Using bundler 2.2.16
Using tilt 2.0.10
Using semantic_range 3.0.0
Using spring 2.1.1
Using sqlite3 1.4.2
Using turbolinks-source 5.2.0
Using i18n 1.8.10
Using thor 1.1.0
Using nokogiri 1.11.3 (x86_64-linux)
Using rack-test 1.1.0
Using msgpack 1.4.2
Using rack-mini-profiler 2.3.1
Using rack-proxy 0.6.5
Using puma 5.2.2
Using set 1.0.1
Using rb-inotify 0.10.1
Using mini_mime 1.0.2
Using turbolinks 5.2.1
Using xpath 3.2.0
Using bootsnap 1.7.3
Using mail 2.7.1
Using listen 3.5.1
Using byebug 11.1.3
Using regexp_parser 2.1.1
Using rbtree 0.4.4
Using sassc 2.4.0
Using sorted_set 1.0.3
Using loofah 2.9.1
Using character_set 1.4.1
Using rails-html-sanitizer 1.3.0
Using js_regex 3.7.0
Using sprockets 4.0.2
Using rubyzip 2.3.0
Using websocket-extensions 0.1.5
Using selenium-webdriver 3.142.7
Using public_suffix 4.0.6
Using bindex 0.8.1
Using tzinfo 2.0.4
Using websocket-driver 0.7.3
Using activesupport 6.1.3.1
Using webdrivers 4.6.0
Using rails-dom-testing 2.0.3
Using globalid 0.4.2
Using activemodel 6.1.3.1
Using activejob 6.1.3.1
Using jbuilder 2.11.2
Using activerecord 6.1.3.1
Using addressable 2.7.0
Using actionview 6.1.3.1
Using capybara 3.35.3
Using actionpack 6.1.3.1
Using actioncable 6.1.3.1
Using activestorage 6.1.3.1
Using actionmailer 6.1.3.1
Using actionmailbox 6.1.3.1
Using railties 6.1.3.1
Using actiontext 6.1.3.1
Using jquery-rails 4.4.0
Using sprockets-rails 3.2.2
Using webpacker 5.2.1
Using rails 6.1.3.1
Using web-console 4.1.0
Using rails_real_favicon 0.1.0
Using client_side_validations 18.0.0
Using tailwindcss-rails 0.3.3
Using sassc-rails 2.1.2
Using sass-rails 6.0.0
louis@Axolotl:~/RubymineProjects/Oktotweet$ ./bin/rails tailwindcss:install
Installing Tailwind CSS
run yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 from "."
yarn add v1.22.10
[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/preset-react@7.13.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.13.12" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-development@7.12.17" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-pure-annotations@7.12.1" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @fullhuman/postcss-purgecss@4.0.3" has incorrect peer dependency "postcss@^8.0.0".
warning " > postcss-loader@5.2.0" has unmet peer dependency "webpack@^5.0.0".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
success Saved 0 new dependencies.
Done in 3.14s.
File unchanged! The supplied flag value not found! app/javascript/packs/application.js
Configuring Tailwind CSS
exist app/javascript/stylesheets
conflict app/javascript/stylesheets/application.scss
Overwrite /home/louis/RubymineProjects/Oktotweet/app/javascript/stylesheets/application.scss? (enter "h" for help) [Ynaqdhm]
Overwrite /home/louis/RubymineProjects/Oktotweet/app/javascript/stylesheets/application.scss? (enter "h" for help) [Ynaqdhm] y
force app/javascript/stylesheets/application.scss
run npx tailwindcss init from "."
@tailwindcss/postcss7-compat 2.1.2
tailwind.config.js already exists.
insert postcss.config.js
Add Tailwindcss include tags in application layout
insert app/views/layouts/application.html.erb
louis@Axolotl:~/RubymineProjects/Oktotweet$ RAILS_ENV=production rails assets:precompile
yarn install v1.22.10
[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/preset-react@7.13.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.13.12" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-development@7.12.17" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-pure-annotations@7.12.1" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @fullhuman/postcss-purgecss@4.0.3" has incorrect peer dependency "postcss@^8.0.0".
warning " > postcss-loader@5.2.0" has unmet peer dependency "webpack@^5.0.0".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 2.44s.
I, [2021-05-03T08:43:48.622679 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/inter-font-a789ddd81e85c482dcbaec4865a1b97cdf87e8185ac9ab08da0f7d37f372cad7.css
I, [2021-05-03T08:43:48.623125 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/inter-font-a789ddd81e85c482dcbaec4865a1b97cdf87e8185ac9ab08da0f7d37f372cad7.css.gz
I, [2021-05-03T08:43:48.623370 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-italic.extra.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2
I, [2021-05-03T08:43:48.623801 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-italic.alternates.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2
I, [2021-05-03T08:43:48.624736 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-italic.symbols.var-59f27012284f5e97bbff303eb599ca98f29629a1c0fe7352bcc15b27d1dcd937.woff2
I, [2021-05-03T08:43:48.625941 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-italic.cyrillic.var-a31159d5ce68b317b19edc7ee7f1f3ffdd5316ee899945b502406abda313afa2.woff2
I, [2021-05-03T08:43:48.626774 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-italic.greek.var-77ec12f9397b88a29c16c05f2db87d9c0d0c2b157f1980271fed020f00b35321.woff2
I, [2021-05-03T08:43:48.627914 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-italic.vietnamese.var-b5dc5b6490ba49e8193315ff62c8e90551102055440f084a6e982e5eab8e589a.woff2
I, [2021-05-03T08:43:48.629039 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-italic.latin-ext.var-802705fb8496b82eda3f410c7e70a35c9407ba98b97cc5d9754db82750466fad.woff2
I, [2021-05-03T08:43:48.630139 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-italic.latin.var-cbfc0334f8cfad4727431982cd32c32f7daf6e73f0ab6f759ec3dc757c1c6bf7.woff2
I, [2021-05-03T08:43:48.631355 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-roman.extra.var-29781a209d7978155bf343eb1653779269965fa4a43d504b1fb361ab20e8487b.woff2
I, [2021-05-03T08:43:48.631898 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-roman.alternates.var-29781a209d7978155bf343eb1653779269965fa4a43d504b1fb361ab20e8487b.woff2
I, [2021-05-03T08:43:48.632638 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-roman.symbols.var-847d2a436a03ba1fbd4b750915db031a12a713befe0dcd79e8f39bf6a6e1a647.woff2
I, [2021-05-03T08:43:48.633120 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-roman.cyrillic.var-8aa524d3da3b8fd4a03ff2d0d41ea50520113fb2e8ae57c15079dabea44b3529.woff2
I, [2021-05-03T08:43:48.634218 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-roman.greek.var-1134a39060691474b0f57b2de5e09977a31a8c06df90960b982314f58a5b4c63.woff2
I, [2021-05-03T08:43:48.634604 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-roman.vietnamese.var-a10e650090dc30250de0db440654c9bf29a843b233ee95a699b008bab0a6d498.woff2
I, [2021-05-03T08:43:48.635094 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-roman.latin-ext.var-46bc23ba7e33ea447579cd95b95f34665d7560377065b72f3a77df8bca4b0e5c.woff2
I, [2021-05-03T08:43:48.635536 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/Inter-roman.latin.var-4b87a3d384ea557b10afa9570b753eda868b12b5e51eea0977ffa6e641998f6a.woff2
I, [2021-05-03T08:43:48.649498 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/tailwind-d11623fa43b89ebbd73fc802278c1b4dbe024deb897ae4d9843d7568f9380779.css
I, [2021-05-03T08:43:48.649676 #7400] INFO -- : Writing /home/louis/RubymineProjects/Oktotweet/public/assets/tailwind-d11623fa43b89ebbd73fc802278c1b4dbe024deb897ae4d9843d7568f9380779.css.gz
Compiling...
Compilation failed:
Hash: 604b9e914cd01865580d
Version: webpack 4.46.0
Time: 1604ms
Built at: 2021-05-03 8:43:51
7 assets
Entrypoint application = js/application-8500d31757e42ce282b2.js js/application-8500d31757e42ce282b2.js.map
Entrypoint script/displayModal = js/script/displayModal-6f95a1a4d03fb01d89d2.js js/script/displayModal-6f95a1a4d03fb01d89d2.js.map
Entrypoint script/notify = js/script/notify-e556e1f24d4d09b43652.js js/script/notify-e556e1f24d4d09b43652.js.map
[1] (webpack)/buildin/module.js 552 bytes {0} [built]
[5] ./app/javascript/channels/index.js 205 bytes {0} [built]
[6] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
[7] ./app/javascript/stylesheets/application.scss 644 bytes {0} [built] [failed] [1 error]
[9] (webpack)/buildin/amd-options.js 80 bytes {0} [built]
[10] ./app/javascript/packs/script/displayModal.js 1.39 KiB {1} [built]
[11] ./app/javascript/packs/script/notify.js 405 bytes {2} [built]
[12] ./app/javascript/packs/application.js + 1 modules 25 KiB {0} [built]
| ./app/javascript/packs/application.js 898 bytes [built]
| + 1 hidden module
+ 5 hidden modules
ERROR in ./node_modules/@fortawesome/fontawesome-free/css/all.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/louis/RubymineProjects/Oktotweet/node_modules/postcss-loader/dist/index.js:38:24)
at /home/louis/RubymineProjects/Oktotweet/node_modules/webpack/lib/NormalModule.js:316:20
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:233:18
@ ./app/javascript/packs/application.js 5:165-211
ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/louis/RubymineProjects/Oktotweet/node_modules/postcss-loader/dist/index.js:38:24)
at /home/louis/RubymineProjects/Oktotweet/node_modules/webpack/lib/NormalModule.js:316:20
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/louis/RubymineProjects/Oktotweet/node_modules/loader-runner/lib/LoaderRunner.js:233:18
@ ./app/javascript/packs/application.js 5:133-165
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/dist/cjs.js??ref--5-2!node_modules/@fortawesome/fontawesome-free/css/all.css:
Entrypoint mini-css-extract-plugin = *
1 module
ERROR in ./node_modules/@fortawesome/fontawesome-free/css/all.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/dist/cjs.js??ref--5-2!./node_modules/@fortawesome/fontawesome-free/css/all.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/louis/RubymineProjects/Oktotweet/node_modules/postcss-loader/dist/index.js:38:24)
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/dist/cjs.js??ref--6-2!node_modules/sass-loader/dist/cjs.js??ref--6-3!app/javascript/stylesheets/application.scss:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/dist/cjs.js??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss 246 bytes {0} [built] [failed] [1 error]
ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/dist/cjs.js??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/louis/RubymineProjects/Oktotweet/node_modules/postcss-loader/dist/index.js:38:24)
我不知道如何阅读它，因为错误总是转到某个节点模块而不是我的应用程序中的某个文件...
这是 postcss.conf 文件：
// postcss.config.js
let environment = {
plugins: [
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
})
]
};
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/**/*.vue',
'./app/javascript/**/*.jsx',
],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
)
}
module.exports = environment;
这是我的 package.json ：
{
"name": "twity-mine-r",
"private": true,
"dependencies": {
"@babel/preset-react": "^7.13.13",
"@client-side-validations/client-side-validations": "^0.1.5",
"@fortawesome/fontawesome-free": "^5.15.3",
"@fullhuman/postcss-purgecss": "^4.0.3",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.2.1",
"autoprefixer": "^9",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"postcss": "^7",
"postcss-loader": "^5.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.11.2"
}
}
这是我的 application.js 的负责人
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "stylesheets/application"
import "@fortawesome/fontawesome-free/css/all"
import "jquery"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
我的 application.scss 的负责人：
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
解决方案
目前，您必须使用带有 Rails 的 PostCSS 7 兼容性构建，因为 Webpacker 不能很好地与 PostCSS 8 配合使用。
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
我会删除 PostCSS 8 包和 autoprefixer 并在此处使用这些。
您可以做的另一件事是使用 David Heinemeier Hansson 最近发布的新 rubygem：tailwindcss -rails
新 gem 的唯一警告是，如果您需要使用 @apply，您将在自定义方面受到限制。否则，这是将 Tailwind 引入资产管道并为您处理所有其他配置的好方法。
推荐阅读
- python - 剥离和替换没有起飞“\n”
- python - 在 Python Dataframe 循环中创建列名
- python-3.x - 如何绑定“退出”文本的返回键以关闭 tkinter (Python) gui 窗口？
- javascript - Discord JS 删除频道上的 webhook
- google-apps-script - 如何删除 Youtube 播放列表中的视频并每天填充新视频
- node.js - 如何在 MongoDB 中构建“用户朋友”集合？
- mongodb - 无法使用 mongo shell 连接到 mongodb Atlas 集群
- python - vscode 可以在文件夹级别运行 pytests 而不是只运行所有测试或只运行单个测试吗？
- c# - 如何在 C# 中从文本框添加到面板
- swift - 表格视图未加载