webpacker | Use Webpack to manage app-like JavaScript modules in Rails | Plugin library

I assume you're using tailwindcss-rails gem. That is the default even if you run rails new app --css tailwind. It uses standalone tailwind executable https://tailwindcss.com/blog/standalone-cli which comes bundled with first party plugins. So any plugin in @tailswindcss/* should work out of the box.

To use any other tailwind plugins you must run a full node.js version of tailwind. The Rails 7 way is to use cssbundling-rails.

The problem is related to the Ruby 3.1 / Psych 4.x incompatibility described in this issue: https://bugs.ruby-lang.org/issues/17866

Ruby 3.0 comes with Psych 3, while Ruby 3.1 comes with Psych 4, which has a major breaking change (diff 3.3.2 → 4.0.0).

• The new YAML loading methods (Psych 4) do not load aliases unless they get the aliases: true argument.
• The old YAML loading methods (Psych 3) do not support the aliases keyword.

At this point, it seems like anyone, anywhere that wants to load YAML in the same way it worked prior to Ruby 3.1, need to do something like this:

Your node version is lower than 12.20，Please select one of the schemes

1.Upgrade your node

npm install node@12.20.0 -g

Or the latest
npm install node@latest -g

Under Windows npm install node may note work, and you should install the latest from https://nodejs.org/en/download/ using Windows Installer (.msi)

2.Reduce the version of copy-webpack-plugin

npm install copy-webpack-plugin@9 -D

The upgrade to version 5 of webpacker made some breaking changes, including how to specify the loading of scss and scss files in ruby on rails apps. Previously in application.js I had

yes, my webpacker is running well. differing from above, my settings are:

config/webpack/environment.js like above, but without the line "poper".

packs/application.js

This seems like everything is working correctly rails just likes to output what its doing to the console but it should have added those to your file.

It's sprockets directive

Sprockets is a gem for assets compiling

So there are few directives with such syntax

//= require - Add the contents of a file to current

//= require_self - Change order of where current contents are concatenated to current

//= require_directory - Add contents of each file in a folder to current

//= require_tree - Add contents of all files in all directories in a path to current

//= link - Make target file compile and be publicly available without adding contents to current

//= link_directory - Make target directory compile and be publicly available without adding contents to current

//= link_tree - Make target tree compile and be publicly available without adding contents to current

//= depend_on - Recompile current file if target has changed

//= stub - Ignore target file

These directives are parsed with Sprockets::DirectiveProcessor entity

And about how it works with other libraries

There is config.assets.paths in the app when you use sprockets. So sprockets search assets there. For example in node_modules folder. It looks that you install bootstrap using yarn and this style sheets are in that directory

But if you install with gem, this gem add to config.assets.paths its own paths

And also tried to install by using

It was because of a cached version of node-sass.You can try this.

• Remove the node-sass from global npm-cache(For Windows users %userprofile%\AppData\Roaming\npm-cache).
• Remove node-sass from your project's node_modules dir.
• Do npm install to reinstall node-sass.