Webpacker VS Sass

We will use Webpacker or JavaScript compiler and assets management. By following the webpacker installation guide, let’s add Webpacker and React to our application.

For example, there is a Ruby on Rails application that uses Webpacker and has JavaScript files that are covered by the system tests. Capybara is used as the system testing tool.

This is done through the Webpacker::DevServerProxy which is a rack middleware that is added by Webpacker.

Using Webpacker in Rails provides several advantages over the traditional asset pipeline. First, Webpacker uses JavaScript modules, which allows for better code organization and improved code reusability. Second, it offers modern frontend build tools, such as Babel and PostCSS, for transforming and compiling assets. Third, it provides faster build times and faster runtime performance through code splitting and lazy loading. Fourth, it offers better integration with JavaScript frameworks such as React, Vue, and Angular. Overall, Webpacker offers a more flexible and modern asset management solution for Rails applications. And while Webpacker is being retired, this initiative is to consolidate our code accordingly before moving our bundler to another solution.

This article is replace Webpacker with Simpacker and webpack.

in ruby ​​on rails 7 what is the best way to properly install Angular because I can't find any documentation about it. The only tutorial that exists uses webpacker (https://github.com/rails/webpacker) but unfortunately it is no longer supported and no longer up to date in terms of security.

From the webpacker gem:

Check this: https://github.com/rails/webpacker/issues/2825

instead of using webpacker you should move to esbuild or importmap. Webpacker has been retired a few months ago (cf https://github.com/rails/webpacker) There are videos explained how to set this up (e.g. for importmap https://learnetto.com/tutorials/how-to-use-react-with-rails-7

19. Sass

SASS - Sass, or Syntactically Awesome Stylesheets, is a CSS preprocessor that extends the functionality of CSS with features like variables, nesting, and mixins. Integrating Sass with React allows for more maintainable and modular styling by enabling the use of these advanced CSS features within React components.

In addition to this, we might want to use some of the power of SASS on our site.

Website: sass-lang.com

This command will prompt a few questions, among them if you want to use SaSS compilation and if you would like to have a search enabled.

Consider using a preprocessor: SCSS or LESS can help you structure and reuse your styles effectively.

Supports Less/Sass/Stylus.

SASS

Sass: A powerful, mature, and stable CSS extension.

Sass/Scss - CSS preprocessor