Rails 8 ActiveAdmin: SCSS not loading, throws "active_admin.css file does not exist"

Question

I’m using Rails 8 with ActiveAdmin and trying to integrate Tailwind CSS in the admin interface. I created a custom SCSS file (active_admin.scss) inside app/assets/stylesheets/ but I’m facing the following issues:

ActiveAdmin does not load the SCSS file, even though it exists. I get an error stating "active_admin.css file does not exist" or similar message when the page is rendered. After generating an active_admin.css file, CSS is not loading properly, and only plain HTML is displayed on the page with no styles applied. Here’s what I have done so far:

1. Renamed active_admin.css to active_admin.scss to use Tailwind.
2. Added @tailwind base;, @tailwind components;, and @tailwind utilities; inside active_admin.scss.
3. Precompiled the assets with rails assets:precompile

Answer 1

I had a similar issue with activeadmin in Rails 8. I was able to solve it by using dartsass-rails.

1. Install dartsass-rails. Add it to your gemfile and run bundle install.
2. Run bundle exec rails dartsass:install
3. Create a new file config/initializers/dartsass.rb and configure which .sass files should be build. I only added the active_admin.scss file:

# config/initializers/dartsass.rb
Rails.application.config.dartsass.builds = {
  'active_admin.scss'  => 'active_admin.css'
}

4. Run bundle exec rails dartsass:build

5. Start your rails server and check http://127.0.0.1:3000/admin. Should be working now.

Edit:

I have been testing this out a bit more but there seems to be more problems. While the CSS works, it looks like the javascript is not getting bundled because of the absence of sprockets. The delete button does not work and there is probably other stuff that I'm not aware of.

I also tried activeadmin v4.0.0.beta15 but the setup is a bit tricky since the standard procedure installs tailwindcss@4 but the gem uses v3. After following the upgrade guide I downgraded the tailwind version to v3 using yarn up tailwindcss@3.

If you install tailwindcss@3 with yarn, it may be necessary to use node_modules and not Plug'n'Play (add nodeLinker: node-modules to .yarnrc.yml). This caused issues when running yarn build:css since it would not find "@activeadmin/activeadmin/plugin".

In summary, it may be easier to just use Rails 7 for now. The activeadminv4 beta has been working fine and looks better than v3 if you want to try it out.