Rails 7 with Importmap: Rails Admin SCSS :- unreadable: @import rails_admin/src/rails_admin/styles/base. Fix Using Yarn/NPM

[princetechs]

Describe the bug Integrating Rails Admin in a Rails 7 environment with Importmap and asset management via Yarn or NPM leads to an issue where the rails_admin.scss does not compile correctly. The styles are not applied as expected, indicating that the asset pipeline may not be properly importing styles from the specified SCSS path.

Reproduction Steps

1. Install Rails Admin: Add gem 'rails_admin' to your Gemfile and run bundle install.
2. Set up Importmap according to Rails 7 documentation.
3. Run the Rails Admin installation generator: rails g rails_admin:install.
4. Start the Rails server: rails s.
5. Navigate to /admin to observe the styling issue.

Expected Behavior Navigating to the /admin route should display the Rails Admin interface styled correctly, showcasing a fully functional and visually appealing UI consistent with Rails Admin standards.

Additional Context

• Rails version: 7.0
• Rails Admin version: 3.1.2

[princetechs]

Proposed Solution

Problem :- _cant find the path **@import "rails_admin/src/rails_admin/styles/base";

• because import work with js you have to install the npm pakage of rails_admin ,
• For pro quick solve :-

look for my gem url and package.json

1. Ensure Proper Gem Installation:

   • Add the Rails Admin gem to your Gemfile:

     gem 'rails_admin', '~> 3.0'

   • i use this :-

     gem 'rails_admin', '~> 3.0', github: "railsadminteam/rails_admin", branch: "master"

     because of a issue:-javascript_importmap_shim_nonce_configuration_tag

   • Run bundle install to install the gem.

2. Configure SCSS File:

   • Create or update the app/assets/stylesheets/rails_admin.scss file. Ensure it imports the Rails Admin base styles correctly:

     $fa-font-path: ".";
     @import "rails_admin/src/rails_admin/styles/base";

   • This path assumes that Rails Admin styles are correctly located in your assets pipeline or accessible through Yarn or NPM packages.

3. Modify package.json for Asset Compilation:

   • Include Rails Admin in your package.json if using node modules to manage CSS:

     {
     "name": "app",
     "private": "true",
     "dependencies": {
      "sass": "^1.77.3",
      "rails_admin": "^3.1.2"
     },
     "scripts": {
      "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css ./app/assets/stylesheets/rails_admin.scss:./app/assets/builds/rails_admin.css --no-source-map --load-path=node_modules"
     }
     }

   • This script compiles SCSS files from the assets directory, using Rails Admin styles from the node_modules.

4. Compile Assets:

   • Depending on your node package manager:
     • If using Yarn:

       yarn install
       yarn run build:css

     • If using NPM:

       npm install
       npm run build:css

5. Run Rails Asset Precompilation:

   • Execute the following in your terminal to ensure all assets are precompiled for production:

     rails assets:precompile

6. finnally

    rails s

   Enjoy

Why This Solution Is Important

This setup ensures that Rails Admin's styles are fully integrated into a Rails 7 application using Importmap, leveraging Yarn or NPM for asset management. It addresses the common pitfalls related to asset compilation in this environment and provides a clear path for developers to ensure their administrative interfaces are styled as expected.

This detailed solution aims to help anyone facing similar configuration challenges, and it's prepared to serve as a comprehensive guide for proper integration of Rails Admin in a modern Rails setup.

[mshibuya]

Isn't your issue just not following this instruction? Aside from that, the procedure almost looks same as what the install generator does: https://github.com/railsadminteam/rails_admin/issues/3648#issuecomment-1778628340