如何使用 Tailwind CSS 读取和解决 Rails 中的 Webpack 错误？

Posted 2023-03-07

技术标签:

【中文标题】如何使用 Tailwind CSS 读取和解决 Rails 中的 Webpack 错误？【英文标题】：How to read and solve Webpack error in rails with Tailwind CSS? 【发布时间】：2021-07-25 00:13:11 【问题描述】：

我尝试使用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";

【问题讨论】：

关注这个错误PostCSS plugin postcss-purgecss requires PostCSS 8.。我的猜测是，您在继续尝试时没有删除 node_modules 并且没有删除 package-lock.json 或 yarn.lock 我添加了 postcss-loader 并且它可以工作，但仅适用于第一个错误：/ 所以其余的错误仍然存在。我已经用新的痕迹编辑了我的问题 【参考方案1】：

目前，您必须使用带有 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 引入资产管道并为您处理所有其他配置的好方法。

【讨论】：

我已经尝试过了，但我仍然在使用 font awesome 和 css-loader 时遇到一些错误。我用新的错误和堆栈跟踪更新了我的线程您是否尝试过重新安装 webpacker？很多时候，这样的问题可以通过这样做来解决。

以上是关于如何使用 Tailwind CSS 读取和解决 Rails 中的 Webpack 错误？的主要内容，如果未能解决你的问题，请参考以下文章

Tailwind CSS 不适用于 React App

如何在 React 中使用 Tailwind CSS 转换背景颜色？

我正在使用 Bootstrap 和 Tailwind CSS 开发 Laravel。我的tailwindcss没有被选中

如何使用tailwind css动态更改下一个js中的边框颜色？

你如何使用 Tailwind.css 构建 npm？

Tailwind.css — 如何使用 Tailwind 实现 last-child？