css-bundling gem + Tailwind CSS with ActiveAdmin

Question

I've been trying the new Rails solution without webpacker, but using css-bundling and js-bundling. css-bundling comes with some "pre-choices" like TailwindCSS.

When you install it, links the build css step in the asset pipeline with the command in the package.json, like this in the package.json:

"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"

This works properly.

Now comes the question. I'm using the ActiveAdmin gem, that creates the active_admin.scss file with the following code:

@import "active_admin/mixins";
@import "active_admin/base";

Problem is, if I try to compile this CSS using TailwindCSS as preprocessor, it is unable to find the imports:

tailwindcss --postcss -i app/assets/stylesheets/active_admin.sass.scss -o active_admin.css --trace-warnings
(node:52651) UnhandledPromiseRejectionWarning: Error: Failed to find 'active_admin/mixins'
  in [
    .../app/assets/stylesheets
  ]
    at .../node_modules/postcss-import/lib/resolve-id.js:35:13
    at async LazyResult.runAsync (.../tailwindcss/peers/index.js:57896:11)
(Use `node --trace-warnings ...` to show where the warning was created)

So I assume that is unable to find the needed CSS located in the gems. The question is: Do you know how can I tell css-bundling to locate the CSS in different places? I assume also that sprockets is smart enough to do it, but I don't know how to deal with css-bundling + build:css command in the package.json

Thanks!

Did you find a solution to this? I'm trying to work on this same thing and feel like I got the css to work, but the js part is harder — Randy Burgess
– Randy Burgess, Commented Dec 22, 2021 at 23:59
I think I found it, but it isn't pretty. You essentially need to write multiple build scripts to create separate application.css and active_admin.css for your asset pipeline. I can share the code if it represents a major blocker for you. At the end of the day, I've decided to nix using Active Admin beyond Rails 6 as I'm tired of trying to make Rails upgrades and AA upgrades play nice. — Randy Burgess
– Randy Burgess, Commented Dec 29, 2021 at 21:14
Thanks a lot Randy, I think with that information I will try and let's see if it works! — Alejandro Perea
– Alejandro Perea, Commented Dec 31, 2021 at 17:39

Randy Burgess · Accepted Answer · 2022-01-01 21:18:01Z

9

This answer may be incomplete or completely worthless, and definitely feels like something I would not want to maintain, but the steps below seemed to be the path to making this work:

Note: I'm using Bootstrap instead of Tailwind, but it should be somewhat the same.

Install the npm-run-all package for running multiple scripts:

yarn add npm-run-all

File setups:

// package.json

  "scripts": {
    "build:js": "npm-run-all --parallel \"build:js:* {@}\" --",
    "build:js:application": "esbuild app/javascript/application.js --bundle --sourcemap --outfile=app/assets/builds/application.js",
    "build:js:active_admin": "esbuild app/javascript/active_admin.js --bundle --sourcemap --outfile=app/assets/builds/active_admin.js",
    "build:css": "npm-run-all --parallel \"build:css:* {@}\" --",
    "build:css:application": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:active_admin": "sass ./app/assets/stylesheets/active_admin/active_admin.scss ./app/assets/builds/active_admin.css --no-source-map --load-path=node_modules"
  }

// packages/jquery.js

import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;

// app/javascript/active_admin.js

import './packages/jquery.js' // position for hoisting
import '@activeadmin/activeadmin/app/assets/javascripts/active_admin/base.js';

// app/assets/stylesheets/active_admin/active_admin.scss

@import "@activeadmin/activeadmin/src/scss/mixins";
@import "@activeadmin/activeadmin/src/scss/base";

# Procfile.dev

web: bin/rails server -p 3000
js: yarn build:js --watch
css: yarn build:css --watch

edited Jan 1, 2022 at 21:18

answered Dec 31, 2021 at 18:21

Randy Burgess

5,0356 gold badges44 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alejandro Perea Over a year ago

Thanks a lot Randy! For me it was very useful

skipmaple Over a year ago

I try this, but delete button not work. it try to get the show action.

Mario Amazing · Accepted Answer · 2024-04-18 17:20:49Z

I've successfully configured the latest stable version of Active Admin in my Rails project. Here's the setup that worked for me:

Gemfile:

gem 'activeadmin', '~> 3.2'
gem 'propshaft'
gem 'cssbundling-rails'
gem 'jsbundling-rails'

With this config:

app/javascript/active_admin.js:

import './add_jquery'

import 'jquery-ui'
import "jquery-ujs"
import 'jquery-ui/ui/unique-id.js'
import 'jquery-ui/ui/widgets/mouse'
import "jquery-ui/ui/widgets/sortable"
import "jquery-ui/ui/widgets/tabs"
import "jquery-ui/ui/widgets/dialog"
import 'jquery-ui/ui/widgets/datepicker'
import 'jquery-ui/ui/widget'
import '@activeadmin/activeadmin'

package.json:

"dependencies": {
  "@activeadmin/activeadmin": "^3.2.0",
  "jquery": "^3.7.1",
  "jquery-ujs": "^1.2.3"
}

Collectives™ on Stack Overflow

css-bundling gem + Tailwind CSS with ActiveAdmin

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related